<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 6.3.0">

  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.ico">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.2/css/all.min.css" integrity="sha256-dABdfBfUoC8vJUBOwGVdm8L9qlMWaHTIfXt+7GnZCIo=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"blog.csgrandeur.cn","root":"/","images":"/images","scheme":"Gemini","darkmode":false,"version":"8.22.0","exturl":false,"sidebar":{"position":"left","width_expanded":320,"width_dual_column":240,"display":"post","padding":18,"offset":12},"hljswrap":true,"copycode":{"enable":true,"style":"default"},"fold":{"enable":false,"height":500},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"duration":200,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"top_n_per_article":1,"unescape":false,"preload":false,"trigger":"auto"}}</script><script src="/js/config.js"></script>

    <meta name="description" content="1. CSS是什么？为什么需要它？ 1.1 从&quot;白纸&quot;到&quot;彩色画&quot;：HTML与CSS的关系 还记得我们在第二章学的HTML吗？HTML就像是一张白纸上的文字，告诉你&quot;这里有个标题&quot;、&quot;那里有段文字&quot;，但所有的文字都是黑色、同样大小、没有颜色。">
<meta property="og:type" content="article">
<meta property="og:title" content="03.CSS与响应式设计">
<meta property="og:url" content="http://blog.csgrandeur.cn/2025-11-11-03-CSS%E4%B8%8E%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1/index.html">
<meta property="og:site_name" content="CSGrandeur&#39;s Thinking">
<meta property="og:description" content="1. CSS是什么？为什么需要它？ 1.1 从&quot;白纸&quot;到&quot;彩色画&quot;：HTML与CSS的关系 还记得我们在第二章学的HTML吗？HTML就像是一张白纸上的文字，告诉你&quot;这里有个标题&quot;、&quot;那里有段文字&quot;，但所有的文字都是黑色、同样大小、没有颜色。">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2025-11-11T10:07:07.000Z">
<meta property="article:modified_time" content="2025-11-18T08:05:59.838Z">
<meta property="article:author" content="CSGrandeur">
<meta property="article:tag" content="AI驱动Web开发技术">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://blog.csgrandeur.cn/2025-11-11-03-CSS%E4%B8%8E%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1/">


<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"http://blog.csgrandeur.cn/2025-11-11-03-CSS%E4%B8%8E%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1/","path":"2025-11-11-03-CSS与响应式设计/","title":"03.CSS与响应式设计"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>03.CSS与响应式设计 | CSGrandeur's Thinking</title>
  

  <script src="/js/third-party/analytics/baidu-analytics.js"></script>
  <script async src="https://hm.baidu.com/hm.js?7958adf931092425a489778560129144"></script>







  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <div class="column">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">CSGrandeur's Thinking</p>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">Cogito Ergo Sum</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger" aria-label="搜索" role="button">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
      <div class="search-header">
        <span class="search-icon">
          <i class="fa fa-search"></i>
        </span>
        <div class="search-input-container">
          <input autocomplete="off" autocapitalize="off" maxlength="80"
                placeholder="搜索..." spellcheck="false"
                type="search" class="search-input">
        </div>
        <span class="popup-btn-close" role="button">
          <i class="fa fa-times-circle"></i>
        </span>
      </div>
      <div class="search-result-container">
        <div class="search-result-icon">
          <i class="fa fa-spinner fa-pulse fa-5x"></i>
        </div>
      </div>
    </div>
  </div>

</header>
        
  
  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#css%E6%98%AF%E4%BB%80%E4%B9%88%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E5%AE%83"><span class="nav-number">1.</span> <span class="nav-text">1. CSS是什么？为什么需要它？</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8E%E7%99%BD%E7%BA%B8%E5%88%B0%E5%BD%A9%E8%89%B2%E7%94%BBhtml%E4%B8%8Ecss%E7%9A%84%E5%85%B3%E7%B3%BB"><span class="nav-number">1.1.</span> <span class="nav-text">1.1
从&quot;白纸&quot;到&quot;彩色画&quot;：HTML与CSS的关系</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#css%E7%9A%84%E8%AF%9E%E7%94%9F%E4%BB%8E%E6%B7%B7%E4%B9%B1%E5%88%B0%E7%BB%9F%E4%B8%80"><span class="nav-number">1.2.</span> <span class="nav-text">1.2 CSS的诞生：从&quot;混乱&quot;到&quot;统一&quot;</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8E%86%E5%8F%B2%E8%83%8C%E6%99%AF1990s-1996"><span class="nav-number">1.2.1.</span> <span class="nav-text">历史背景（1990s-1996）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#css%E7%9A%84%E8%AF%9E%E7%94%9F1996%E5%B9%B4"><span class="nav-number">1.2.2.</span> <span class="nav-text">CSS的诞生（1996年）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88css%E5%AF%B9%E7%8E%B0%E4%BB%A3web%E5%BC%80%E5%8F%91%E8%87%B3%E5%85%B3%E9%87%8D%E8%A6%81"><span class="nav-number">1.3.</span> <span class="nav-text">1.3
为什么CSS对现代Web开发至关重要？</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#css%E9%80%89%E6%8B%A9%E5%99%A8%E7%B2%BE%E5%87%86%E5%AE%9A%E4%BD%8D%E7%9A%84%E7%9E%84%E5%87%86%E9%95%9C"><span class="nav-number">2.</span> <span class="nav-text">2. CSS选择器：精准定位的&quot;瞄准镜&quot;</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-number">2.1.</span> <span class="nav-text">2.1 什么是选择器？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9F%BA%E7%A1%80%E9%80%89%E6%8B%A9%E5%99%A8%E5%BF%85%E9%A1%BB%E6%8E%8C%E6%8F%A1"><span class="nav-number">2.2.</span> <span class="nav-text">2.2 基础选择器（必须掌握）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A0%87%E7%AD%BE%E9%80%89%E6%8B%A9%E5%99%A8%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-number">2.2.1.</span> <span class="nav-text">2.2.1 标签选择器（元素选择器）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8%E6%9C%80%E5%B8%B8%E7%94%A8"><span class="nav-number">2.2.2.</span> <span class="nav-text">2.2.2 类选择器（最常用）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#id%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-number">2.2.3.</span> <span class="nav-text">2.2.3 ID选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-number">2.2.4.</span> <span class="nav-text">2.2.4 属性选择器</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BB%84%E5%90%88%E9%80%89%E6%8B%A9%E5%99%A8%E8%BF%9B%E9%98%B6%E6%8A%80%E5%B7%A7"><span class="nav-number">2.3.</span> <span class="nav-text">2.3 组合选择器（进阶技巧）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%90%8E%E4%BB%A3%E9%80%89%E6%8B%A9%E5%99%A8%E7%A9%BA%E6%A0%BC"><span class="nav-number">2.3.1.</span> <span class="nav-text">2.3.1 后代选择器（空格）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AD%90%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-number">2.3.2.</span> <span class="nav-text">2.3.2 子元素选择器（&gt;）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B9%B6%E9%9B%86%E9%80%89%E6%8B%A9%E5%99%A8%E9%80%97%E5%8F%B7"><span class="nav-number">2.3.3.</span> <span class="nav-text">2.3.3 并集选择器（逗号）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8%E8%AE%A9%E4%BA%A4%E4%BA%92%E6%9B%B4%E7%94%9F%E5%8A%A8"><span class="nav-number">2.4.</span> <span class="nav-text">2.4 伪类选择器（让交互更生动）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B8%B8%E7%94%A8%E4%BC%AA%E7%B1%BB"><span class="nav-number">2.4.1.</span> <span class="nav-text">2.4.1 常用伪类</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%80%89%E6%8B%A9%E5%99%A8%E4%BC%98%E5%85%88%E7%BA%A7%E9%87%8D%E8%A6%81%E6%A6%82%E5%BF%B5"><span class="nav-number">2.5.</span> <span class="nav-text">2.5 选择器优先级（重要概念）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E4%BC%98%E5%85%88%E7%BA%A7"><span class="nav-number">2.5.1.</span> <span class="nav-text">2.5.1 什么是优先级？</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E6%88%98%E7%BB%83%E4%B9%A0%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8%E7%BE%8E%E5%8C%96%E9%A1%B5%E9%9D%A2"><span class="nav-number">2.6.</span> <span class="nav-text">2.6 实战练习：用选择器美化页面</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#flex%E5%B8%83%E5%B1%80%E5%AE%9E%E6%88%98%E8%AE%A9%E5%85%83%E7%B4%A0%E5%90%AC%E8%AF%9D%E7%9A%84%E9%AD%94%E6%B3%95"><span class="nav-number">3.</span> <span class="nav-text">3.
Flex布局实战：让元素&quot;听话&quot;的魔法</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81flex%E5%B8%83%E5%B1%80"><span class="nav-number">3.1.</span> <span class="nav-text">3.1 为什么需要Flex布局？</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BC%A0%E7%BB%9F%E5%B8%83%E5%B1%80%E7%9A%84%E7%97%9B%E7%82%B9"><span class="nav-number">3.1.1.</span> <span class="nav-text">3.1.1 传统布局的痛点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#flex%E5%B8%83%E5%B1%80%E7%9A%84%E8%AF%9E%E7%94%9F2012%E5%B9%B4"><span class="nav-number">3.1.2.</span> <span class="nav-text">3.1.2 Flex布局的诞生（2012年）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#flex%E5%B8%83%E5%B1%80%E7%9A%84%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5"><span class="nav-number">3.2.</span> <span class="nav-text">3.2 Flex布局的核心概念</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFflex%E5%AE%B9%E5%99%A8%E5%92%8Cflex%E9%A1%B9%E7%9B%AE"><span class="nav-number">3.2.1.</span> <span class="nav-text">3.2.1 什么是Flex容器和Flex项目？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BB%E8%BD%B4%E5%92%8C%E4%BA%A4%E5%8F%89%E8%BD%B4flex%E5%B8%83%E5%B1%80%E7%9A%84%E5%9D%90%E6%A0%87%E7%B3%BB"><span class="nav-number">3.2.2.</span> <span class="nav-text">3.2.2
主轴和交叉轴：Flex布局的&quot;坐标系&quot;</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#flex%E5%B8%83%E5%B1%80%E7%9A%84%E5%B8%B8%E7%94%A8%E5%B1%9E%E6%80%A7%E5%BF%85%E9%A1%BB%E6%8E%8C%E6%8F%A1"><span class="nav-number">3.3.</span> <span class="nav-text">3.3
Flex布局的常用属性（必须掌握）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%B9%E5%99%A8%E7%9A%84%E5%B1%9E%E6%80%A7%E5%9C%A8flex%E5%AE%B9%E5%99%A8%E4%B8%8A%E8%AE%BE%E7%BD%AE"><span class="nav-number">3.3.1.</span> <span class="nav-text">3.3.1
容器的属性（在Flex容器上设置）</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#display-flex---%E5%BC%80%E5%90%AFflex%E5%B8%83%E5%B1%80"><span class="nav-number">3.3.1.1.</span> <span class="nav-text">1. display: flex; -
开启Flex布局</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#flex-direction---%E6%8E%A7%E5%88%B6%E4%B8%BB%E8%BD%B4%E6%96%B9%E5%90%91"><span class="nav-number">3.3.1.2.</span> <span class="nav-text">2. flex-direction -
控制主轴方向</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#justify-content---%E4%B8%BB%E8%BD%B4%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F"><span class="nav-number">3.3.1.3.</span> <span class="nav-text">3. justify-content
- 主轴对齐方式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#align-items---%E4%BA%A4%E5%8F%89%E8%BD%B4%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F"><span class="nav-number">3.3.1.4.</span> <span class="nav-text">4. align-items -
交叉轴对齐方式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#gap---%E9%A1%B9%E7%9B%AE%E4%B9%8B%E9%97%B4%E7%9A%84%E9%97%B4%E8%B7%9D"><span class="nav-number">3.3.1.5.</span> <span class="nav-text">5. gap - 项目之间的间距</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A1%B9%E7%9B%AE%E7%9A%84%E5%B1%9E%E6%80%A7%E5%9C%A8flex%E9%A1%B9%E7%9B%AE%E4%B8%8A%E8%AE%BE%E7%BD%AE"><span class="nav-number">3.3.2.</span> <span class="nav-text">3.3.2
项目的属性（在Flex项目上设置）</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#flex---%E6%8E%A7%E5%88%B6%E9%A1%B9%E7%9B%AE%E7%9A%84%E4%BC%B8%E7%BC%A9%E6%AF%94%E4%BE%8B"><span class="nav-number">3.3.2.1.</span> <span class="nav-text">flex -
控制项目的伸缩比例</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E6%88%98%E6%A1%88%E4%BE%8B%E5%AE%9E%E7%8E%B0%E5%AF%BC%E8%88%AA%E6%A0%8F%E5%B8%83%E5%B1%80"><span class="nav-number">3.4.</span> <span class="nav-text">3.4 实战案例：实现导航栏布局</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%9C%80%E6%B1%82%E5%88%86%E6%9E%90"><span class="nav-number">3.4.1.</span> <span class="nav-text">3.4.1 需求分析</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#html%E7%BB%93%E6%9E%84"><span class="nav-number">3.4.2.</span> <span class="nav-text">3.4.2 HTML结构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#css%E6%A0%B7%E5%BC%8F%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81"><span class="nav-number">3.4.3.</span> <span class="nav-text">3.4.3 CSS样式（完整代码）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81%E8%A7%A3%E6%9E%90%E9%80%90%E6%AD%A5%E7%90%86%E8%A7%A3"><span class="nav-number">3.4.4.</span> <span class="nav-text">3.4.4 代码解析（逐步理解）</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E6%AD%A5%E8%AE%A9%E5%AF%BC%E8%88%AA%E6%A0%8F%E5%8F%98%E6%88%90flex%E5%AE%B9%E5%99%A8"><span class="nav-number">3.4.4.1.</span> <span class="nav-text">第一步：让导航栏变成Flex容器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%BA%8C%E6%AD%A5%E8%AE%A9logo%E5%92%8C%E5%AF%BC%E8%88%AA%E9%93%BE%E6%8E%A5%E5%88%86%E5%B8%83%E5%9C%A8%E4%B8%A4%E7%AB%AF"><span class="nav-number">3.4.4.2.</span> <span class="nav-text">第二步：让Logo和导航链接分布在两端</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%B8%89%E6%AD%A5%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD"><span class="nav-number">3.4.4.3.</span> <span class="nav-text">第三步：垂直居中</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E5%9B%9B%E6%AD%A5%E8%AE%A9%E5%AF%BC%E8%88%AA%E9%93%BE%E6%8E%A5%E6%A8%AA%E5%90%91%E6%8E%92%E5%88%97"><span class="nav-number">3.4.4.4.</span> <span class="nav-text">第四步：让导航链接横向排列</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9C%80%E7%BB%88%E6%95%88%E6%9E%9C"><span class="nav-number">3.4.5.</span> <span class="nav-text">3.4.5 最终效果</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9B%B4%E5%A4%9A%E5%AE%9E%E6%88%98%E6%A1%88%E4%BE%8B"><span class="nav-number">3.5.</span> <span class="nav-text">3.5 更多实战案例</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A1%88%E4%BE%8B1%E5%8D%A1%E7%89%87%E5%B8%83%E5%B1%80%E4%B8%89%E5%88%97%E7%AD%89%E5%AE%BD"><span class="nav-number">3.5.1.</span> <span class="nav-text">案例1：卡片布局（三列等宽）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A1%88%E4%BE%8B2%E5%B1%85%E4%B8%AD%E5%B8%83%E5%B1%80%E6%9C%80%E5%B8%B8%E7%94%A8"><span class="nav-number">3.5.2.</span> <span class="nav-text">案例2：居中布局（最常用！）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E4%B8%8E%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="nav-number">3.6.</span> <span class="nav-text">3.6 常见问题与解决方案</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%981flex%E9%A1%B9%E7%9B%AE%E6%B2%A1%E6%9C%89%E6%A8%AA%E5%90%91%E6%8E%92%E5%88%97"><span class="nav-number">3.6.1.</span> <span class="nav-text">问题1：Flex项目没有横向排列？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%982%E6%83%B3%E5%AE%9E%E7%8E%B0%E5%9E%82%E7%9B%B4%E6%8E%92%E5%88%97"><span class="nav-number">3.6.2.</span> <span class="nav-text">问题2：想实现垂直排列？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%983%E9%A1%B9%E7%9B%AE%E4%B9%8B%E9%97%B4%E7%9A%84%E9%97%B4%E8%B7%9D%E6%80%8E%E4%B9%88%E8%AE%BE%E7%BD%AE"><span class="nav-number">3.6.3.</span> <span class="nav-text">问题3：项目之间的间距怎么设置？</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%AC%E8%8A%82%E6%80%BB%E7%BB%93"><span class="nav-number">3.7.</span> <span class="nav-text">3.7 本节总结</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2%E5%BA%94%E7%94%A8%E8%AE%A9%E7%BD%91%E9%A1%B5%E6%99%BA%E8%83%BD%E9%80%82%E9%85%8D"><span class="nav-number">4.</span> <span class="nav-text">4.
媒体查询应用：让网页&quot;智能适配&quot;</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2"><span class="nav-number">4.1.</span> <span class="nav-text">4.1 为什么需要媒体查询？</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%98%E7%9A%84%E5%87%BA%E7%8E%B0%E4%B8%80%E4%B8%AA%E7%BD%91%E9%A1%B5%E5%A4%9A%E7%A7%8D%E8%AE%BE%E5%A4%87"><span class="nav-number">4.1.1.</span> <span class="nav-text">4.1.1
问题的出现：一个网页，多种设备</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2%E7%9A%84%E8%AF%9E%E7%94%9F2012%E5%B9%B4"><span class="nav-number">4.1.2.</span> <span class="nav-text">4.1.2 媒体查询的诞生（2012年）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2"><span class="nav-number">4.2.</span> <span class="nav-text">4.2 什么是媒体查询？</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%94%9F%E6%B4%BB%E7%B1%BB%E6%AF%94"><span class="nav-number">4.2.1.</span> <span class="nav-text">4.2.1 生活类比</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2%E7%9A%84%E5%AE%9A%E4%B9%89"><span class="nav-number">4.2.2.</span> <span class="nav-text">4.2.2 媒体查询的定义</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2%E7%9A%84%E8%AF%AD%E6%B3%95%E8%AF%A6%E8%A7%A3"><span class="nav-number">4.3.</span> <span class="nav-text">4.3 媒体查询的语法详解</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95%E7%BB%93%E6%9E%84"><span class="nav-number">4.3.1.</span> <span class="nav-text">4.3.1 基本语法结构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B8%B8%E7%94%A8%E7%9A%84%E5%AA%92%E4%BD%93%E7%B1%BB%E5%9E%8B"><span class="nav-number">4.3.2.</span> <span class="nav-text">4.3.2 常用的媒体类型</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B8%B8%E7%94%A8%E7%9A%84%E5%AA%92%E4%BD%93%E7%89%B9%E6%80%A7%E6%9D%A1%E4%BB%B6"><span class="nav-number">4.3.3.</span> <span class="nav-text">4.3.3 常用的媒体特性（条件）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1%E7%9A%84%E6%96%AD%E7%82%B9breakpoint"><span class="nav-number">4.4.</span> <span class="nav-text">4.4
响应式设计的断点（Breakpoint）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E6%96%AD%E7%82%B9"><span class="nav-number">4.4.1.</span> <span class="nav-text">4.4.1 什么是断点？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B8%B8%E7%94%A8%E7%9A%84%E6%96%AD%E7%82%B9%E5%80%BC"><span class="nav-number">4.4.2.</span> <span class="nav-text">4.4.2 常用的断点值</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%A7%BB%E5%8A%A8%E4%BC%98%E5%85%88mobile-first%E7%AD%96%E7%95%A5"><span class="nav-number">4.4.3.</span> <span class="nav-text">4.4.3 移动优先（Mobile
First）策略</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E6%88%98%E6%A1%88%E4%BE%8B%E5%88%B6%E4%BD%9C%E8%87%AA%E9%80%82%E5%BA%94%E9%A1%B5%E9%9D%A2"><span class="nav-number">4.5.</span> <span class="nav-text">4.5 实战案例：制作自适应页面</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%9C%80%E6%B1%82%E5%88%86%E6%9E%90-1"><span class="nav-number">4.5.1.</span> <span class="nav-text">4.5.1 需求分析</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#html%E7%BB%93%E6%9E%84-1"><span class="nav-number">4.5.2.</span> <span class="nav-text">4.5.2 HTML结构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#css%E6%A0%B7%E5%BC%8F%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81-1"><span class="nav-number">4.5.3.</span> <span class="nav-text">4.5.3 CSS样式（完整代码）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81%E8%A7%A3%E6%9E%90%E9%80%90%E6%AD%A5%E7%90%86%E8%A7%A3-1"><span class="nav-number">4.5.4.</span> <span class="nav-text">4.5.4 代码解析（逐步理解）</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E6%AD%A5%E6%89%8B%E6%9C%BA%E6%A0%B7%E5%BC%8F%E9%BB%98%E8%AE%A4"><span class="nav-number">4.5.4.1.</span> <span class="nav-text">第一步：手机样式（默认）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%BA%8C%E6%AD%A5%E5%B9%B3%E6%9D%BF%E6%A0%B7%E5%BC%8F768px"><span class="nav-number">4.5.4.2.</span> <span class="nav-text">第二步：平板样式（≥768px）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%B8%89%E6%AD%A5%E7%94%B5%E8%84%91%E6%A0%B7%E5%BC%8F1024px"><span class="nav-number">4.5.4.3.</span> <span class="nav-text">第三步：电脑样式（≥1024px）</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9C%80%E7%BB%88%E6%95%88%E6%9E%9C-1"><span class="nav-number">4.5.5.</span> <span class="nav-text">4.5.5 最终效果</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9B%B4%E5%A4%9A%E5%AE%9E%E6%88%98%E6%A1%88%E4%BE%8B-1"><span class="nav-number">4.6.</span> <span class="nav-text">4.6 更多实战案例</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A1%88%E4%BE%8B1%E5%93%8D%E5%BA%94%E5%BC%8F%E5%AF%BC%E8%88%AA%E6%A0%8F"><span class="nav-number">4.6.1.</span> <span class="nav-text">案例1：响应式导航栏</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A1%88%E4%BE%8B2%E5%93%8D%E5%BA%94%E5%BC%8F%E5%AD%97%E4%BD%93%E5%A4%A7%E5%B0%8F"><span class="nav-number">4.6.2.</span> <span class="nav-text">案例2：响应式字体大小</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E4%B8%8E%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-1"><span class="nav-number">4.7.</span> <span class="nav-text">4.7 常见问题与解决方案</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%981%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2%E4%B8%8D%E7%94%9F%E6%95%88"><span class="nav-number">4.7.1.</span> <span class="nav-text">问题1：媒体查询不生效？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%982%E6%96%AD%E7%82%B9%E5%80%BC%E5%BA%94%E8%AF%A5%E9%80%89%E5%A4%9A%E5%B0%91"><span class="nav-number">4.7.2.</span> <span class="nav-text">问题2：断点值应该选多少？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%983%E7%A7%BB%E5%8A%A8%E4%BC%98%E5%85%88%E8%BF%98%E6%98%AF%E6%A1%8C%E9%9D%A2%E4%BC%98%E5%85%88"><span class="nav-number">4.7.3.</span> <span class="nav-text">问题3：移动优先还是桌面优先？</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%AC%E8%8A%82%E6%80%BB%E7%BB%93-1"><span class="nav-number">4.8.</span> <span class="nav-text">4.8 本节总结</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#ai%E5%AE%9E%E6%88%98%E4%BD%BF%E7%94%A8ai%E7%94%9F%E6%88%90%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80"><span class="nav-number">5.</span> <span class="nav-text">5. AI实战：使用AI生成响应式布局</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E7%94%A8ai%E7%94%9F%E6%88%90%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80"><span class="nav-number">5.1.</span> <span class="nav-text">5.1 为什么用AI生成响应式布局？</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80%E7%9A%84%E5%A4%8D%E6%9D%82%E6%80%A7"><span class="nav-number">5.1.1.</span> <span class="nav-text">5.1.1 响应式布局的复杂性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ai%E7%9A%84%E4%BC%98%E5%8A%BF"><span class="nav-number">5.1.2.</span> <span class="nav-text">5.1.2 AI的优势</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E6%88%98%E6%A1%88%E4%BE%8B%E7%94%A8ai%E7%94%9F%E6%88%90%E5%93%8D%E5%BA%94%E5%BC%8F%E5%AF%BC%E8%88%AA%E6%A0%8F"><span class="nav-number">5.2.</span> <span class="nav-text">5.2
实战案例：用AI生成响应式导航栏</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E6%AD%A5%E8%AE%BE%E8%AE%A1prompt"><span class="nav-number">5.2.1.</span> <span class="nav-text">5.2.1 第一步：设计Prompt</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ai%E7%94%9F%E6%88%90%E7%9A%84%E4%BB%A3%E7%A0%81%E7%A4%BA%E4%BE%8B"><span class="nav-number">5.2.2.</span> <span class="nav-text">5.2.2 AI生成的代码（示例）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B5%8B%E8%AF%95%E5%92%8C%E4%BC%98%E5%8C%96"><span class="nav-number">5.2.3.</span> <span class="nav-text">5.2.3 测试和优化</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E6%88%98%E6%A1%88%E4%BE%8B%E7%94%A8ai%E7%94%9F%E6%88%90%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8D%A1%E7%89%87%E5%B8%83%E5%B1%80"><span class="nav-number">5.3.</span> <span class="nav-text">5.3
实战案例：用AI生成响应式卡片布局</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#prompt%E8%AE%BE%E8%AE%A1"><span class="nav-number">5.3.1.</span> <span class="nav-text">5.3.1 Prompt设计</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ai%E7%94%9F%E6%88%90%E7%9A%84%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96%E7%89%88"><span class="nav-number">5.3.2.</span> <span class="nav-text">5.3.2 AI生成的代码（优化版）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ai%E7%94%9F%E6%88%90%E4%BB%A3%E7%A0%81%E7%9A%84%E4%BC%98%E5%8C%96%E6%8A%80%E5%B7%A7"><span class="nav-number">5.4.</span> <span class="nav-text">5.4 AI生成代码的优化技巧</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E5%86%99%E5%87%BA%E6%9B%B4%E5%A5%BD%E7%9A%84prompt"><span class="nav-number">5.4.1.</span> <span class="nav-text">5.4.1 如何写出更好的Prompt？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%AD%E4%BB%A3%E4%BC%98%E5%8C%96%E4%B8%80%E6%AD%A5%E6%AD%A5%E5%AE%8C%E5%96%84"><span class="nav-number">5.4.2.</span> <span class="nav-text">5.4.2 迭代优化：一步步完善</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A3%80%E6%9F%A5ai%E7%94%9F%E6%88%90%E7%9A%84%E4%BB%A3%E7%A0%81"><span class="nav-number">5.4.3.</span> <span class="nav-text">5.4.3 检查AI生成的代码</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E4%B8%8E%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-2"><span class="nav-number">5.5.</span> <span class="nav-text">5.5 常见问题与解决方案</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%981ai%E7%94%9F%E6%88%90%E7%9A%84%E4%BB%A3%E7%A0%81%E4%B8%8D%E5%B7%A5%E4%BD%9C"><span class="nav-number">5.5.1.</span> <span class="nav-text">问题1：AI生成的代码不工作？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%982ai%E7%94%9F%E6%88%90%E7%9A%84%E4%BB%A3%E7%A0%81%E4%B8%8D%E7%AC%A6%E5%90%88%E9%9C%80%E6%B1%82"><span class="nav-number">5.5.2.</span> <span class="nav-text">问题2：AI生成的代码不符合需求？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%983%E5%A6%82%E4%BD%95%E8%AE%A9ai%E7%94%9F%E6%88%90%E6%9B%B4%E5%A5%BD%E7%9A%84%E4%BB%A3%E7%A0%81"><span class="nav-number">5.5.3.</span> <span class="nav-text">问题3：如何让AI生成更好的代码？</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%AC%E8%8A%82%E6%80%BB%E7%BB%93-2"><span class="nav-number">5.6.</span> <span class="nav-text">5.6 本节总结</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E9%80%89%E8%AE%B2css%E5%8F%98%E9%87%8F%E4%B8%8E%E4%B8%BB%E9%A2%98%E5%AE%9A%E5%88%B6"><span class="nav-number">6.</span> <span class="nav-text">6. 选讲：CSS变量与主题定制</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81css%E5%8F%98%E9%87%8F"><span class="nav-number">6.1.</span> <span class="nav-text">6.1 为什么需要CSS变量？</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BC%A0%E7%BB%9F%E6%96%B9%E5%BC%8F%E7%9A%84%E7%97%9B%E7%82%B9"><span class="nav-number">6.1.1.</span> <span class="nav-text">6.1.1 传统方式的痛点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#css%E5%8F%98%E9%87%8F%E7%9A%84%E8%AF%9E%E7%94%9F2015%E5%B9%B4"><span class="nav-number">6.1.2.</span> <span class="nav-text">6.1.2 CSS变量的诞生（2015年）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFcss%E5%8F%98%E9%87%8F"><span class="nav-number">6.2.</span> <span class="nav-text">6.2 什么是CSS变量？</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%94%9F%E6%B4%BB%E7%B1%BB%E6%AF%94-1"><span class="nav-number">6.2.1.</span> <span class="nav-text">6.2.1 生活类比</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#css%E5%8F%98%E9%87%8F%E7%9A%84%E5%AE%9A%E4%B9%89"><span class="nav-number">6.2.2.</span> <span class="nav-text">6.2.2 CSS变量的定义</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#css%E5%8F%98%E9%87%8F%E7%9A%84%E8%AF%AD%E6%B3%95%E8%AF%A6%E8%A7%A3"><span class="nav-number">6.3.</span> <span class="nav-text">6.3 CSS变量的语法详解</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%9A%E4%B9%89%E5%8F%98%E9%87%8F"><span class="nav-number">6.3.1.</span> <span class="nav-text">6.3.1 定义变量</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8%E5%8F%98%E9%87%8F"><span class="nav-number">6.3.2.</span> <span class="nav-text">6.3.2 使用变量</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8F%98%E9%87%8F%E7%9A%84%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="nav-number">6.3.3.</span> <span class="nav-text">6.3.3 变量的作用域</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8F%98%E9%87%8F%E7%9A%84%E9%BB%98%E8%AE%A4%E5%80%BC"><span class="nav-number">6.3.4.</span> <span class="nav-text">6.3.4 变量的默认值</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AE%9E%E6%88%98%E6%A1%88%E4%BE%8B%E4%BD%BF%E7%94%A8css%E5%8F%98%E9%87%8F%E5%AE%9E%E7%8E%B0%E4%B8%BB%E9%A2%98%E5%88%87%E6%8D%A2"><span class="nav-number">6.4.</span> <span class="nav-text">6.4
实战案例：使用CSS变量实现主题切换</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%9C%80%E6%B1%82%E5%88%86%E6%9E%90-2"><span class="nav-number">6.4.1.</span> <span class="nav-text">6.4.1 需求分析</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#html%E7%BB%93%E6%9E%84-2"><span class="nav-number">6.4.2.</span> <span class="nav-text">6.4.2 HTML结构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#css%E6%A0%B7%E5%BC%8F%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81-2"><span class="nav-number">6.4.3.</span> <span class="nav-text">6.4.3 CSS样式（完整代码）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#javascript%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0%E4%B8%BB%E9%A2%98%E5%88%87%E6%8D%A2"><span class="nav-number">6.4.4.</span> <span class="nav-text">6.4.4
JavaScript代码（实现主题切换）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81%E8%A7%A3%E6%9E%90%E9%80%90%E6%AD%A5%E7%90%86%E8%A7%A3-2"><span class="nav-number">6.4.5.</span> <span class="nav-text">6.4.5 代码解析（逐步理解）</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%B8%80%E6%AD%A5%E5%AE%9A%E4%B9%89%E5%8F%98%E9%87%8F%E6%98%8E%E4%BA%AE%E6%A8%A1%E5%BC%8F"><span class="nav-number">6.4.5.1.</span> <span class="nav-text">第一步：定义变量（明亮模式）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%BA%8C%E6%AD%A5%E5%AE%9A%E4%B9%89%E5%8F%98%E9%87%8F%E6%9A%97%E9%BB%91%E6%A8%A1%E5%BC%8F"><span class="nav-number">6.4.5.2.</span> <span class="nav-text">第二步：定义变量（暗黑模式）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E4%B8%89%E6%AD%A5%E5%BA%94%E7%94%A8%E5%8F%98%E9%87%8F"><span class="nav-number">6.4.5.3.</span> <span class="nav-text">第三步：应用变量</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%AC%AC%E5%9B%9B%E6%AD%A5javascript%E5%88%87%E6%8D%A2%E4%B8%BB%E9%A2%98"><span class="nav-number">6.4.5.4.</span> <span class="nav-text">第四步：JavaScript切换主题</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9C%80%E7%BB%88%E6%95%88%E6%9E%9C-2"><span class="nav-number">6.4.6.</span> <span class="nav-text">6.4.6 最终效果</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9B%B4%E5%A4%9A%E5%AE%9E%E6%88%98%E6%A1%88%E4%BE%8B-2"><span class="nav-number">6.5.</span> <span class="nav-text">6.5 更多实战案例</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A1%88%E4%BE%8B1%E5%A4%9A%E4%B8%BB%E9%A2%98%E5%88%87%E6%8D%A2%E4%B8%8D%E5%8F%AA%E6%98%AF%E6%98%8E%E4%BA%AE%E6%9A%97%E9%BB%91"><span class="nav-number">6.5.1.</span> <span class="nav-text">案例1：多主题切换（不只是明亮&#x2F;暗黑）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A1%88%E4%BE%8B2%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8F%98%E9%87%8F%E6%A0%B9%E6%8D%AE%E5%B1%8F%E5%B9%95%E5%A4%A7%E5%B0%8F%E6%94%B9%E5%8F%98%E5%80%BC"><span class="nav-number">6.5.2.</span> <span class="nav-text">案例2：响应式变量（根据屏幕大小改变值）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#css%E5%8F%98%E9%87%8F%E7%9A%84%E4%BC%98%E5%8A%BF%E6%80%BB%E7%BB%93"><span class="nav-number">6.6.</span> <span class="nav-text">6.6 CSS变量的优势总结</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E4%B8%8E%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-3"><span class="nav-number">6.7.</span> <span class="nav-text">6.7 常见问题与解决方案</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%981css%E5%8F%98%E9%87%8F%E4%B8%8D%E7%94%9F%E6%95%88"><span class="nav-number">6.7.1.</span> <span class="nav-text">问题1：CSS变量不生效？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%982%E5%A6%82%E4%BD%95%E5%9C%A8%E4%B8%8D%E6%94%AF%E6%8C%81css%E5%8F%98%E9%87%8F%E7%9A%84%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E4%BD%BF%E7%94%A8"><span class="nav-number">6.7.2.</span> <span class="nav-text">问题2：如何在不支持CSS变量的浏览器中使用？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%97%AE%E9%A2%983%E5%8F%98%E9%87%8F%E5%90%8D%E5%BA%94%E8%AF%A5%E6%80%8E%E4%B9%88%E5%91%BD%E5%90%8D"><span class="nav-number">6.7.3.</span> <span class="nav-text">问题3：变量名应该怎么命名？</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%AC%E8%8A%82%E6%80%BB%E7%BB%93-3"><span class="nav-number">6.8.</span> <span class="nav-text">6.8 本节总结</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%AC%E7%AB%A0%E6%80%BB%E7%BB%93"><span class="nav-number">6.9.</span> <span class="nav-text">本章总结</span></a></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">CSGrandeur</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">72</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">6</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">22</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>

        </div>
      </div>
    </div>

    
  </aside>


    </div>

    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://blog.csgrandeur.cn/2025-11-11-03-CSS%E4%B8%8E%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="CSGrandeur">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="CSGrandeur's Thinking">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="03.CSS与响应式设计 | CSGrandeur's Thinking">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          03.CSS与响应式设计
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2025-11-11 18:07:07" itemprop="dateCreated datePublished" datetime="2025-11-11T18:07:07+08:00">2025-11-11</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2025-11-18 16:05:59" itemprop="dateModified" datetime="2025-11-18T16:05:59+08:00">2025-11-18</time>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody"><h1 id="css是什么为什么需要它">1. CSS是什么？为什么需要它？</h1>
<h2 id="从白纸到彩色画html与css的关系">1.1
从"白纸"到"彩色画"：HTML与CSS的关系</h2>
<p>还记得我们在第二章学的HTML吗？HTML就像是一张<strong>白纸上的文字</strong>，告诉你"这里有个标题"、"那里有段文字"，但所有的文字都是<strong>黑色、同样大小、没有颜色</strong>。</p>
<span id="more"></span>
<p><strong>生活类比</strong>：</p>
<ul>
<li><strong>HTML</strong> =
房子的<strong>框架结构</strong>（墙、门、窗）</li>
<li><strong>CSS</strong> =
房子的<strong>装修风格</strong>（墙纸颜色、家具摆放、灯光效果）</li>
</ul>
<p><strong>实际例子</strong>：</p>
<p><strong>只有HTML的网页</strong>（像白纸）： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>我的博客<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>欢迎来到我的网站<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>这里有很多有趣的内容<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p><strong>加上CSS后的网页</strong>（像彩色画）： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">style</span>=<span class="string">&quot;color: blue; font-size: 32px;&quot;</span>&gt;</span>我的博客<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">style</span>=<span class="string">&quot;color: gray; line-height: 1.6;&quot;</span>&gt;</span>欢迎来到我的网站<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">style</span>=<span class="string">&quot;color: gray; line-height: 1.6;&quot;</span>&gt;</span>这里有很多有趣的内容<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>💡 <strong>关键理解</strong>：<br />
HTML负责"内容是什么"，CSS负责"内容长什么样"。<br />
就像写作文：HTML是"写什么"，CSS是"怎么写漂亮"。</p>
</blockquote>
<!-- more -->
<hr />
<h2 id="css的诞生从混乱到统一">1.2 CSS的诞生：从"混乱"到"统一"</h2>
<h3 id="历史背景1990s-1996">历史背景（1990s-1996）</h3>
<p>在CSS出现之前，网页设计师们遇到了大麻烦：</p>
<table>
<colgroup>
<col style="width: 18%" />
<col style="width: 43%" />
<col style="width: 37%" />
</colgroup>
<thead>
<tr class="header">
<th>问题</th>
<th>当时的解决方案</th>
<th>为什么不好</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>样式混乱</strong></td>
<td>每个网站用不同的HTML标签实现样式</td>
<td>代码重复，维护困难</td>
</tr>
<tr class="even">
<td><strong>无法复用</strong></td>
<td>每个页面都要重新写样式代码</td>
<td>改一个颜色要改100个地方</td>
</tr>
<tr class="odd">
<td><strong>HTML臃肿</strong></td>
<td>用<code>&lt;font&gt;</code>、<code>&lt;center&gt;</code>等标签控制样式</td>
<td>HTML代码变得又长又乱</td>
</tr>
</tbody>
</table>
<p><strong>真实案例</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 1990年代的网页代码（没有CSS） --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">font</span> <span class="attr">color</span>=<span class="string">&quot;red&quot;</span> <span class="attr">size</span>=<span class="string">&quot;5&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">center</span>&gt;</span><span class="tag">&lt;<span class="name">b</span>&gt;</span>欢迎来到我的网站<span class="tag">&lt;/<span class="name">b</span>&gt;</span><span class="tag">&lt;/<span class="name">center</span>&gt;</span><span class="tag">&lt;/<span class="name">font</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">font</span> <span class="attr">color</span>=<span class="string">&quot;blue&quot;</span> <span class="attr">size</span>=<span class="string">&quot;3&quot;</span>&gt;</span>这里有很多内容<span class="tag">&lt;/<span class="name">font</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">font</span> <span class="attr">color</span>=<span class="string">&quot;blue&quot;</span> <span class="attr">size</span>=<span class="string">&quot;3&quot;</span>&gt;</span>还有更多内容<span class="tag">&lt;/<span class="name">font</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 每个地方都要重复写样式，改颜色要改100次！ --&gt;</span></span><br></pre></td></tr></table></figure></p>
<h3 id="css的诞生1996年">CSS的诞生（1996年）</h3>
<p><strong>1996年，W3C（万维网联盟）发布了CSS
1.0</strong>，彻底改变了网页设计：</p>
<table>
<colgroup>
<col style="width: 38%" />
<col style="width: 23%" />
<col style="width: 38%" />
</colgroup>
<thead>
<tr class="header">
<th>CSS的优势</th>
<th>说明</th>
<th>实际效果</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>样式分离</strong></td>
<td>样式写在单独的CSS文件中</td>
<td>HTML代码变简洁，CSS代码可复用</td>
</tr>
<tr class="even">
<td><strong>统一管理</strong></td>
<td>改一个CSS文件，全站样式都变</td>
<td>改颜色只需改1个地方</td>
</tr>
<tr class="odd">
<td><strong>专业分工</strong></td>
<td>前端设计师专注CSS，后端专注HTML</td>
<td>开发效率提升10倍</td>
</tr>
</tbody>
</table>
<p><strong>现代代码（有CSS）</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- HTML：只负责结构 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>欢迎来到我的网站<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>这里有很多内容<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>还有更多内容<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* CSS：统一管理样式 */</span></span><br><span class="line"><span class="selector-tag">h1</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">32px</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: blue;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 改颜色？改这里就行！ */</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>🌟 <strong>历史意义</strong>：<br />
CSS的诞生让网页设计从"手工作坊"变成了"现代化工厂"，是Web开发史上的重要里程碑。</p>
</blockquote>
<hr />
<h2 id="为什么css对现代web开发至关重要">1.3
为什么CSS对现代Web开发至关重要？</h2>
<table>
<colgroup>
<col style="width: 33%" />
<col style="width: 25%" />
<col style="width: 41%" />
</colgroup>
<thead>
<tr class="header">
<th>重要性</th>
<th>说明</th>
<th>实际案例</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>用户体验</strong></td>
<td>美观的界面吸引用户</td>
<td>同样功能的网站，设计好的访问量高3倍</td>
</tr>
<tr class="even">
<td><strong>维护效率</strong></td>
<td>统一管理样式，修改方便</td>
<td>改主题颜色从"改100个文件"变成"改1个文件"</td>
</tr>
<tr class="odd">
<td><strong>响应式设计</strong></td>
<td>让网页适配手机、平板、电脑</td>
<td>一个网站，所有设备都能看</td>
</tr>
<tr class="even">
<td><strong>性能优化</strong></td>
<td>CSS可以缓存，加载更快</td>
<td>用户第二次访问时，页面加载快50%</td>
</tr>
</tbody>
</table>
<blockquote>
<p>💡 <strong>对初学者的意义</strong>：<br />
学会CSS，你就能做出<strong>专业、美观、现代</strong>的网页。<br />
这是从"能写代码"到"能做好看的产品"的关键一步！</p>
</blockquote>
<hr />
<h1 id="css选择器精准定位的瞄准镜">2. CSS选择器：精准定位的"瞄准镜"</h1>
<h2 id="什么是选择器">2.1 什么是选择器？</h2>
<p><strong>生活类比</strong>：<br />
想象你是一个<strong>园丁</strong>，花园里有100朵花，你想给"红色的玫瑰花"浇水。</p>
<ul>
<li>❌
<strong>没有选择器</strong>：你只能一朵一朵地找，找到红色玫瑰再浇水（效率低）</li>
<li>✅
<strong>有选择器</strong>：你直接说"给所有红色玫瑰浇水"，系统自动找到所有符合条件的（效率高）</li>
</ul>
<p><strong>CSS选择器</strong> = 告诉浏览器"我要给哪些元素加样式"</p>
<hr />
<h2 id="基础选择器必须掌握">2.2 基础选择器（必须掌握）</h2>
<h3 id="标签选择器元素选择器">2.2.1 标签选择器（元素选择器）</h3>
<p><strong>作用</strong>：选中所有相同标签的元素</p>
<p><strong>语法</strong>：直接写标签名</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 选中所有 &lt;p&gt; 标签 */</span></span><br><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: blue;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 选中所有 &lt;h1&gt; 标签 */</span></span><br><span class="line"><span class="selector-tag">h1</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">32px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>实际例子</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>这是第一段<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>这是第二段<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是标题<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p><strong>效果</strong>：所有<code>&lt;p&gt;</code>标签的文字变成蓝色，所有<code>&lt;h1&gt;</code>标签的字号变成32px</p>
<blockquote>
<p>💡
<strong>适用场景</strong>：给所有相同类型的元素设置统一样式（比如所有段落都用同样的字体大小）</p>
</blockquote>
<hr />
<h3 id="类选择器最常用">2.2.2 类选择器（最常用）</h3>
<p><strong>作用</strong>：选中所有具有相同<code>class</code>属性的元素</p>
<p><strong>语法</strong>：<code>.类名</code>（注意前面有个点）</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 选中所有 class=&quot;highlight&quot; 的元素 */</span></span><br><span class="line"><span class="selector-class">.highlight</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: yellow;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 选中所有 class=&quot;button&quot; 的元素 */</span></span><br><span class="line"><span class="selector-class">.button</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: blue;</span><br><span class="line">    <span class="attribute">color</span>: white;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>实际例子</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;highlight&quot;</span>&gt;</span>这段文字会被高亮<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>这段文字不会被高亮<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;button&quot;</span>&gt;</span>点击我<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p><strong>效果</strong>：只有<code>class="highlight"</code>的段落背景变黄，只有<code>class="button"</code>的按钮有蓝色背景</p>
<blockquote>
<p>💡 <strong>为什么最常用？</strong><br />
因为可以<strong>精确控制</strong>：不是所有段落都要高亮，只有特定的才需要。<br />
就像给特定的人发消息，而不是群发所有人。</p>
</blockquote>
<hr />
<h3 id="id选择器">2.2.3 ID选择器</h3>
<p><strong>作用</strong>：选中具有特定<code>id</code>属性的元素（<strong>注意：一个页面中，同一个id只能出现一次</strong>）</p>
<p><strong>语法</strong>：<code>#id名</code>（注意前面有个井号）</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 选中 id=&quot;header&quot; 的元素 */</span></span><br><span class="line"><span class="selector-id">#header</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#333</span>;</span><br><span class="line">    <span class="attribute">color</span>: white;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 选中 id=&quot;footer&quot; 的元素 */</span></span><br><span class="line"><span class="selector-id">#footer</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#f0f0f0</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>实际例子</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">header</span> <span class="attr">id</span>=<span class="string">&quot;header&quot;</span>&gt;</span>网站头部<span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">main</span>&gt;</span>主要内容<span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">footer</span> <span class="attr">id</span>=<span class="string">&quot;footer&quot;</span>&gt;</span>网站底部<span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p><strong>效果</strong>：只有<code>id="header"</code>的元素有深色背景，只有<code>id="footer"</code>的元素有浅色背景</p>
<blockquote>
<p>⚠️ <strong>重要提醒</strong>：</p>
<ul>
<li><p><strong>ID是唯一的</strong>：一个页面中，同一个id只能出现一次（就像身份证号，每个人只有一个）<br />
</p></li>
<li><p><strong>类可以重复</strong>：一个页面中，同一个class可以出现多次（就像"学生"这个身份，很多人都有）</p></li>
<li><p><strong>什么时候用ID？</strong>：页面中<strong>唯一</strong>的元素（如header、footer、导航栏）<br />
</p></li>
<li><p><strong>什么时候用类？</strong>：页面中<strong>可能重复</strong>的元素（如按钮、卡片、列表项）</p></li>
</ul>
</blockquote>
<hr />
<h3 id="属性选择器">2.2.4 属性选择器</h3>
<p><strong>作用</strong>：根据元素的属性及其值来选中元素</p>
<p><strong>语法</strong>：<code>[属性名="属性值"]</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 选中所有 type=&quot;text&quot; 的输入框 */</span></span><br><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;text&quot;</span>]</span> &#123;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 选中所有 href 属性包含 &quot;http&quot; 的链接 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-attr">[href*=<span class="string">&quot;http&quot;</span>]</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: blue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>实际例子</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;输入用户名&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;输入密码&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;http://example.com&quot;</span>&gt;</span>外部链接<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;/about&quot;</span>&gt;</span>内部链接<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p><strong>效果</strong>：只有文本输入框有边框，只有外部链接是蓝色</p>
<blockquote>
<p>💡 <strong>适用场景</strong>：<br />
当你想选中"具有特定属性的元素"时使用（比如所有外部链接、所有必填输入框）</p>
</blockquote>
<hr />
<h2 id="组合选择器进阶技巧">2.3 组合选择器（进阶技巧）</h2>
<h3 id="后代选择器空格">2.3.1 后代选择器（空格）</h3>
<p><strong>作用</strong>：选中某个元素<strong>内部</strong>的所有指定元素（不管嵌套多少层）</p>
<p><strong>语法</strong>：<code>父元素 子元素</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 选中 .container 内部的所有 &lt;p&gt; 标签 */</span></span><br><span class="line"><span class="selector-class">.container</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: blue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>实际例子</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;container&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>这个段落会被选中<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>这个段落也会被选中（即使嵌套在div里）<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>这个段落不会被选中（不在.container里）<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p><strong>效果</strong>：只有<code>.container</code>内部的段落变成蓝色，外部的段落不变</p>
<hr />
<h3 id="子元素选择器">2.3.2 子元素选择器（&gt;）</h3>
<p><strong>作用</strong>：选中某个元素的<strong>直接子元素</strong>（只选一层，不选嵌套的）</p>
<p><strong>语法</strong>：<code>父元素 &gt; 子元素</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 只选中 .container 的直接子元素 &lt;p&gt; */</span></span><br><span class="line"><span class="selector-class">.container</span> &gt; <span class="selector-tag">p</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: blue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>实际例子</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;container&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>这个段落会被选中（直接子元素）<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>这个段落不会被选中（不是直接子元素）<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p><strong>对比</strong>：</p>
<ul>
<li><strong>后代选择器</strong>（空格）：选中所有嵌套的<code>&lt;p&gt;</code>（包括间接子元素）</li>
<li><strong>子元素选择器</strong>（&gt;）：只选中直接子元素<code>&lt;p&gt;</code>（不包括间接子元素）</li>
</ul>
<hr />
<h3 id="并集选择器逗号">2.3.3 并集选择器（逗号）</h3>
<p><strong>作用</strong>：同时选中多个不同的元素，给它们设置相同的样式</p>
<p><strong>语法</strong>：<code>选择器1, 选择器2, 选择器3</code></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 同时选中 h1、h2、h3，给它们设置相同的样式 */</span></span><br><span class="line"><span class="selector-tag">h1</span>, <span class="selector-tag">h2</span>, <span class="selector-tag">h3</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: blue;</span><br><span class="line">    <span class="attribute">font-weight</span>: bold;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>实际例子</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>标题1<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>标题2<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>标题3<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>段落<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p><strong>效果</strong>：所有标题（h1、h2、h3）都变成蓝色加粗，段落不变</p>
<hr />
<h2 id="伪类选择器让交互更生动">2.4 伪类选择器（让交互更生动）</h2>
<p><strong>什么是伪类？</strong><br />
伪类选择器用于选中元素的<strong>特定状态</strong>（比如鼠标悬停、被点击、第一个子元素等）</p>
<h3 id="常用伪类">2.4.1 常用伪类</h3>
<table>
<thead>
<tr class="header">
<th>伪类</th>
<th>作用</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><code>:hover</code></td>
<td>鼠标悬停时的状态</td>
<td>按钮悬停时变色</td>
</tr>
<tr class="even">
<td><code>:active</code></td>
<td>鼠标点击时的状态</td>
<td>按钮按下时的效果</td>
</tr>
<tr class="odd">
<td><code>:focus</code></td>
<td>元素获得焦点时</td>
<td>输入框被选中时</td>
</tr>
<tr class="even">
<td><code>:first-child</code></td>
<td>第一个子元素</td>
<td>列表第一项特殊样式</td>
</tr>
<tr class="odd">
<td><code>:nth-child(n)</code></td>
<td>第n个子元素</td>
<td>列表奇数项特殊样式</td>
</tr>
</tbody>
</table>
<p><strong>实际例子</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 链接默认样式 */</span></span><br><span class="line"><span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: blue;</span><br><span class="line">    <span class="attribute">text-decoration</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 鼠标悬停时 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">text-decoration</span>: underline;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 鼠标点击时 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: green;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 列表第一项 */</span></span><br><span class="line"><span class="selector-tag">li</span><span class="selector-pseudo">:first-child</span> &#123;</span><br><span class="line">    <span class="attribute">font-weight</span>: bold;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 列表奇数项 */</span></span><br><span class="line"><span class="selector-tag">li</span><span class="selector-pseudo">:nth-child</span>(odd) &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#f0f0f0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>HTML示例</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>点击我试试<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>第一项（会加粗）<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>第二项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>第三项（会有背景色）<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>第四项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p><strong>效果</strong>：</p>
<ul>
<li>链接默认蓝色，鼠标悬停变红色并加下划线，点击时变绿色</li>
<li>列表第一项加粗，奇数项有浅灰色背景</li>
</ul>
<blockquote>
<p>💡 <strong>为什么叫"伪类"？</strong><br />
因为它不是真正的HTML类（class），而是元素的"状态"。<br />
就像人的"状态"：健康、生病、疲劳，不是人的属性，而是某个时刻的状态。</p>
</blockquote>
<hr />
<h2 id="选择器优先级重要概念">2.5 选择器优先级（重要概念）</h2>
<h3 id="什么是优先级">2.5.1 什么是优先级？</h3>
<p>当多个选择器选中同一个元素，且设置了不同的样式时，浏览器需要决定"听谁的"。</p>
<p><strong>优先级规则</strong>（从高到低）：</p>
<ol type="1">
<li><strong>内联样式</strong>（<code>style="..."</code>） -
优先级最高</li>
<li><strong>ID选择器</strong>（<code>#id</code>）</li>
<li><strong>类选择器</strong>（<code>.class</code>）、属性选择器（<code>[attr]</code>）、伪类（<code>:hover</code>）</li>
<li><strong>标签选择器</strong>（<code>p</code>、<code>div</code>等）</li>
</ol>
<p><strong>实际例子</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;text&quot;</span> <span class="attr">id</span>=<span class="string">&quot;intro&quot;</span> <span class="attr">style</span>=<span class="string">&quot;color: green;&quot;</span>&gt;</span>这是一段文字<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: blue;        <span class="comment">/* 优先级：1（标签选择器） */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.text</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: red;         <span class="comment">/* 优先级：10（类选择器） */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#intro</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: yellow;      <span class="comment">/* 优先级：100（ID选择器） */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 但内联样式 style=&quot;color: green;&quot; 优先级最高：1000 */</span></span><br></pre></td></tr></table></figure>
<p><strong>最终效果</strong>：文字是<strong>绿色</strong>（因为内联样式优先级最高）</p>
<blockquote>
<p>💡 <strong>记忆技巧</strong>：<br />
优先级就像"权力等级"：</p>
<ul>
<li><p>内联样式 = 皇帝（最高权力）<br />
</p></li>
<li><p>ID选择器 = 大臣（高权力）</p></li>
<li><p>类选择器 = 官员（中等权力）<br />
</p></li>
<li><p>标签选择器 = 平民（基础权力）</p></li>
</ul>
</blockquote>
<hr />
<h2 id="实战练习用选择器美化页面">2.6 实战练习：用选择器美化页面</h2>
<p><strong>任务</strong>：给下面的HTML添加CSS，实现以下效果：</p>
<ul>
<li>所有段落文字为灰色</li>
<li>所有<code>.highlight</code>类的元素背景为黄色</li>
<li>所有链接默认蓝色，悬停时变红色</li>
<li>列表第一项加粗</li>
</ul>
<p><strong>HTML代码</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>选择器练习<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">        <span class="comment">/* 在这里写CSS */</span></span></span><br><span class="line"><span class="language-css">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>我的网页<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>这是一段普通文字<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;highlight&quot;</span>&gt;</span>这是一段高亮文字<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>点击我<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>第一项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>第二项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>第三项<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p><strong>参考答案</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 所有段落文字为灰色 */</span></span><br><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: gray;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 所有 .highlight 类的元素背景为黄色 */</span></span><br><span class="line"><span class="selector-class">.highlight</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: yellow;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 所有链接默认蓝色 */</span></span><br><span class="line"><span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: blue;</span><br><span class="line">    <span class="attribute">text-decoration</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 链接悬停时变红色 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 列表第一项加粗 */</span></span><br><span class="line"><span class="selector-tag">li</span><span class="selector-pseudo">:first-child</span> &#123;</span><br><span class="line">    <span class="attribute">font-weight</span>: bold;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>🌟 <strong>记住</strong>：<br />
选择器是CSS的"瞄准镜"，学会精准定位，你就能控制网页的每一个细节！</p>
</blockquote>
<hr />
<h1 id="flex布局实战让元素听话的魔法">3.
Flex布局实战：让元素"听话"的魔法</h1>
<h2 id="为什么需要flex布局">3.1 为什么需要Flex布局？</h2>
<h3 id="传统布局的痛点">3.1.1 传统布局的痛点</h3>
<p>还记得我们之前学的HTML吗？当我们把几个<code>&lt;div&gt;</code>放在一起时，它们会<strong>垂直排列</strong>（一个在另一个下面），就像叠积木一样。</p>
<p><strong>问题来了</strong>：如果我们想让它们<strong>横向排列</strong>（并排显示），比如做一个导航栏，该怎么办？</p>
<p><strong>传统方法</strong>（很麻烦）： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 方法1：使用float（浮动） */</span></span><br><span class="line"><span class="selector-class">.nav-item</span> &#123;</span><br><span class="line">    <span class="attribute">float</span>: left;  <span class="comment">/* 让元素&quot;浮起来&quot;，横向排列 */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 问题：需要清除浮动，容易出bug */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 方法2：使用inline-block */</span></span><br><span class="line"><span class="selector-class">.nav-item</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: inline-block;  <span class="comment">/* 让块级元素变成行内块 */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 问题：元素之间会有空隙，难以控制 */</span></span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>💡 <strong>生活类比</strong>：<br />
传统布局就像"手动摆积木"：</p>
<ul>
<li><p>想横向排列？得用各种"技巧"（float、inline-block）<br />
</p></li>
<li><p>想居中？得算数学（margin: 0 auto）</p></li>
<li><p>想对齐？得写很多代码</p></li>
</ul>
<p><strong>Flex布局</strong>就像"智能积木盒"：</p>
<ul>
<li><p>说一句"横向排列"，所有积木自动排好<br />
</p></li>
<li><p>说一句"居中"，自动居中</p></li>
<li><p>简单、直观、强大！</p></li>
</ul>
</blockquote>
<hr />
<h3 id="flex布局的诞生2012年">3.1.2 Flex布局的诞生（2012年）</h3>
<p><strong>2012年，W3C正式发布了Flexbox布局规范</strong>，彻底改变了CSS布局方式：</p>
<table>
<thead>
<tr class="header">
<th>传统布局</th>
<th>Flex布局</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>需要写很多代码</td>
<td>几行代码搞定</td>
</tr>
<tr class="even">
<td>容易出bug（如浮动塌陷）</td>
<td>稳定可靠</td>
</tr>
<tr class="odd">
<td>难以实现复杂对齐</td>
<td>轻松实现各种对齐</td>
</tr>
<tr class="even">
<td>响应式适配困难</td>
<td>天然支持响应式</td>
</tr>
</tbody>
</table>
<blockquote>
<p>🌟 <strong>历史意义</strong>：<br />
Flex布局是CSS布局史上的<strong>革命性突破</strong>，让"居中"、"对齐"这些曾经让人头疼的问题，变得像写一句话那么简单。</p>
</blockquote>
<hr />
<h2 id="flex布局的核心概念">3.2 Flex布局的核心概念</h2>
<h3 id="什么是flex容器和flex项目">3.2.1 什么是Flex容器和Flex项目？</h3>
<p><strong>生活类比</strong>：<br />
想象一个<strong>收纳盒</strong>（Flex容器），里面放着几个<strong>小盒子</strong>（Flex项目）。</p>
<ul>
<li><strong>Flex容器</strong>：设置了<code>display: flex;</code>的元素（就像收纳盒）</li>
<li><strong>Flex项目</strong>：Flex容器内的<strong>直接子元素</strong>（就像小盒子）</li>
</ul>
<p><strong>实际例子</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;container&quot;</span>&gt;</span>  <span class="comment">&lt;!-- 这是Flex容器 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span>项目1<span class="tag">&lt;/<span class="name">div</span>&gt;</span>  <span class="comment">&lt;!-- 这是Flex项目 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span>项目2<span class="tag">&lt;/<span class="name">div</span>&gt;</span>  <span class="comment">&lt;!-- 这是Flex项目 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span>项目3<span class="tag">&lt;/<span class="name">div</span>&gt;</span>  <span class="comment">&lt;!-- 这是Flex项目 --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;  <span class="comment">/* 让.container变成Flex容器 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>⚠️ <strong>重要提醒</strong>：<br />
只有<strong>直接子元素</strong>才是Flex项目！<br />
如果<code>.container</code>里面有个<code>&lt;div&gt;</code>，<code>&lt;div&gt;</code>里面又有<code>&lt;p&gt;</code>，那么<code>&lt;p&gt;</code><strong>不是</strong>Flex项目（因为不是直接子元素）。</p>
</blockquote>
<hr />
<h3 id="主轴和交叉轴flex布局的坐标系">3.2.2
主轴和交叉轴：Flex布局的"坐标系"</h3>
<p><strong>生活类比</strong>：<br />
想象你在<strong>整理书架</strong>：</p>
<ul>
<li><strong>主轴</strong> =
书架的<strong>横向</strong>（从左到右，或从右到左）</li>
<li><strong>交叉轴</strong> =
书架的<strong>纵向</strong>（从上到下，或从下到上）</li>
</ul>
<p><strong>Flex布局中的两个轴</strong>：</p>
<table>
<colgroup>
<col style="width: 12%" />
<col style="width: 37%" />
<col style="width: 25%" />
<col style="width: 25%" />
</colgroup>
<thead>
<tr class="header">
<th>轴</th>
<th>默认方向</th>
<th>作用</th>
<th>类比</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>主轴（Main Axis）</strong></td>
<td>水平方向（从左到右）</td>
<td>控制Flex项目的<strong>排列方向</strong></td>
<td>书架的横向</td>
</tr>
<tr class="even">
<td><strong>交叉轴（Cross Axis）</strong></td>
<td>垂直方向（从上到下）</td>
<td>控制Flex项目的<strong>对齐方式</strong></td>
<td>书架的纵向</td>
</tr>
</tbody>
</table>
<p><strong>示意图</strong>： <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">主轴（Main Axis）→→→→→→→→→→→→→</span><br><span class="line">                    ↑</span><br><span class="line">                    ↑</span><br><span class="line">                交叉轴</span><br><span class="line">                 (Cross Axis)</span><br><span class="line">                    ↑</span><br><span class="line">                    ↑</span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>💡 <strong>记忆技巧</strong>：</p>
<ul>
<li><p><strong>主轴</strong> = 主要排列方向（横向或纵向）<br />
</p></li>
<li><p><strong>交叉轴</strong> = 垂直于主轴的方向</p></li>
<li><p>默认情况下，主轴是<strong>横向</strong>，交叉轴是<strong>纵向</strong></p></li>
</ul>
</blockquote>
<hr />
<h2 id="flex布局的常用属性必须掌握">3.3
Flex布局的常用属性（必须掌握）</h2>
<h3 id="容器的属性在flex容器上设置">3.3.1
容器的属性（在Flex容器上设置）</h3>
<h4 id="display-flex---开启flex布局">1. <code>display: flex;</code> -
开启Flex布局</h4>
<p><strong>作用</strong>：让元素变成Flex容器</p>
<p><strong>语法</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;  <span class="comment">/* 开启Flex布局 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>实际例子</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>项目1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>项目2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>项目3<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;  <span class="comment">/* 三个div会横向排列 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>效果</strong>：三个<code>&lt;div&gt;</code>会<strong>横向排列</strong>（并排显示），而不是垂直排列。</p>
<hr />
<h4 id="flex-direction---控制主轴方向">2. <code>flex-direction</code> -
控制主轴方向</h4>
<p><strong>作用</strong>：决定Flex项目沿着哪个方向排列</p>
<p><strong>可选值</strong>：</p>
<table>
<thead>
<tr class="header">
<th>值</th>
<th>效果</th>
<th>主轴方向</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><code>row</code>（默认）</td>
<td>横向排列（从左到右）</td>
<td>水平</td>
</tr>
<tr class="even">
<td><code>row-reverse</code></td>
<td>横向排列（从右到左）</td>
<td>水平（反向）</td>
</tr>
<tr class="odd">
<td><code>column</code></td>
<td>纵向排列（从上到下）</td>
<td>垂直</td>
</tr>
<tr class="even">
<td><code>column-reverse</code></td>
<td>纵向排列（从下到上）</td>
<td>垂直（反向）</td>
</tr>
</tbody>
</table>
<p><strong>实际例子</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">flex-direction</span>: row;  <span class="comment">/* 横向排列（默认值） */</span></span><br><span class="line">    <span class="comment">/* 项目1 | 项目2 | 项目3 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">flex-direction</span>: column;  <span class="comment">/* 纵向排列 */</span></span><br><span class="line">    <span class="comment">/* 项目1</span></span><br><span class="line"><span class="comment">       项目2</span></span><br><span class="line"><span class="comment">       项目3 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>💡 <strong>生活类比</strong>：<br />
<code>flex-direction</code>就像决定"书架是横着放还是竖着放"：</p>
<ul>
<li><code>row</code> = 横着放（书从左到右排列）</li>
<li><code>column</code> = 竖着放（书从上到下排列）</li>
</ul>
</blockquote>
<hr />
<h4 id="justify-content---主轴对齐方式">3. <code>justify-content</code>
- 主轴对齐方式</h4>
<p><strong>作用</strong>：控制Flex项目在<strong>主轴</strong>上的对齐方式（这是最常用的属性之一！）</p>
<p><strong>可选值</strong>：</p>
<table>
<colgroup>
<col style="width: 17%" />
<col style="width: 35%" />
<col style="width: 47%" />
</colgroup>
<thead>
<tr class="header">
<th>值</th>
<th>效果</th>
<th>示意图</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><code>flex-start</code>（默认）</td>
<td>从主轴起点开始排列</td>
<td><code>[项目1][项目2][项目3]</code></td>
</tr>
<tr class="even">
<td><code>flex-end</code></td>
<td>从主轴终点开始排列</td>
<td><code>[项目1][项目2][项目3]</code></td>
</tr>
<tr class="odd">
<td><code>center</code></td>
<td>在主轴上居中</td>
<td><code>[项目1][项目2][项目3]</code></td>
</tr>
<tr class="even">
<td><code>space-between</code></td>
<td>项目之间平均分布，首尾贴边</td>
<td><code>[项目1]    [项目2]    [项目3]</code></td>
</tr>
<tr class="odd">
<td><code>space-around</code></td>
<td>项目周围平均分布</td>
<td><code>[项目1]  [项目2]  [项目3]</code></td>
</tr>
<tr class="even">
<td><code>space-evenly</code></td>
<td>项目之间完全平均分布</td>
<td><code>[项目1] [项目2] [项目3]</code></td>
</tr>
</tbody>
</table>
<p><strong>实际例子</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">justify-content</span>: center;  <span class="comment">/* 项目在主轴上居中 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>效果对比</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 左对齐 */</span></span><br><span class="line"><span class="attribute">justify-content</span>: flex-start;</span><br><span class="line"><span class="comment">/* [项目1][项目2][项目3]                    */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 居中 */</span></span><br><span class="line"><span class="attribute">justify-content</span>: center;</span><br><span class="line"><span class="comment">/*            [项目1][项目2][项目3]          */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 右对齐 */</span></span><br><span class="line"><span class="attribute">justify-content</span>: flex-end;</span><br><span class="line"><span class="comment">/*                    [项目1][项目2][项目3]  */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 平均分布（首尾贴边） */</span></span><br><span class="line"><span class="attribute">justify-content</span>: space-between;</span><br><span class="line"><span class="comment">/* [项目1]        [项目2]        [项目3]      */</span></span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>💡 <strong>记忆技巧</strong>：<br />
<code>justify-content</code> = "主轴对齐"<br />
想居中？用<code>center</code>！<br />
想平均分布？用<code>space-between</code>！</p>
</blockquote>
<hr />
<h4 id="align-items---交叉轴对齐方式">4. <code>align-items</code> -
交叉轴对齐方式</h4>
<p><strong>作用</strong>：控制Flex项目在<strong>交叉轴</strong>上的对齐方式</p>
<p><strong>可选值</strong>：</p>
<table>
<thead>
<tr class="header">
<th>值</th>
<th>效果</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><code>stretch</code>（默认）</td>
<td>拉伸填满容器</td>
<td>项目会被拉伸到容器高度</td>
</tr>
<tr class="even">
<td><code>flex-start</code></td>
<td>从交叉轴起点对齐</td>
<td>项目靠上对齐</td>
</tr>
<tr class="odd">
<td><code>flex-end</code></td>
<td>从交叉轴终点对齐</td>
<td>项目靠下对齐</td>
</tr>
<tr class="even">
<td><code>center</code></td>
<td>在交叉轴上居中</td>
<td><strong>最常用！</strong> 垂直居中</td>
</tr>
<tr class="odd">
<td><code>baseline</code></td>
<td>基线对齐</td>
<td>文字基线对齐</td>
</tr>
</tbody>
</table>
<p><strong>实际例子</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">align-items</span>: center;  <span class="comment">/* 项目在交叉轴上居中（垂直居中） */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>效果对比</strong>（假设容器高度是100px）： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 靠上对齐 */</span></span><br><span class="line"><span class="attribute">align-items</span>: flex-start;</span><br><span class="line"><span class="comment">/* [项目1]</span></span><br><span class="line"><span class="comment">   [项目2]</span></span><br><span class="line"><span class="comment">   [项目3] */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 垂直居中 */</span></span><br><span class="line"><span class="attribute">align-items</span>: center;</span><br><span class="line"><span class="comment">/*    [项目1]</span></span><br><span class="line"><span class="comment">      [项目2]</span></span><br><span class="line"><span class="comment">      [项目3] */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 靠下对齐 */</span></span><br><span class="line"><span class="attribute">align-items</span>: flex-end;</span><br><span class="line"><span class="comment">/*          [项目1]</span></span><br><span class="line"><span class="comment">            [项目2]</span></span><br><span class="line"><span class="comment">            [项目3] */</span></span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>💡 <strong>最常用场景</strong>：<br />
想实现<strong>垂直居中</strong>？用<code>align-items: center;</code>！<br />
这是Flex布局最强大的功能之一，以前需要写很多代码才能实现，现在一行搞定！</p>
</blockquote>
<hr />
<h4 id="gap---项目之间的间距">5. <code>gap</code> - 项目之间的间距</h4>
<p><strong>作用</strong>：设置Flex项目之间的间距（<strong>注意：这是较新的属性，现代浏览器都支持</strong>）</p>
<p><strong>语法</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">gap</span>: <span class="number">20px</span>;  <span class="comment">/* 项目之间间距20px */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>实际例子</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">gap</span>: <span class="number">15px</span>;  <span class="comment">/* 所有项目之间都有15px的间距 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>效果</strong>： <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[项目1] --15px-- [项目2] --15px-- [项目3]</span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>💡 <strong>为什么推荐用<code>gap</code>？</strong><br />
以前设置间距需要用<code>margin</code>，但<code>margin</code>会有很多问题（比如首尾项目也会有外边距）。<br />
<code>gap</code>属性专门用来设置项目间距，<strong>简单、直观、不会出错</strong>！</p>
</blockquote>
<hr />
<h3 id="项目的属性在flex项目上设置">3.3.2
项目的属性（在Flex项目上设置）</h3>
<h4 id="flex---控制项目的伸缩比例"><code>flex</code> -
控制项目的伸缩比例</h4>
<p><strong>作用</strong>：控制Flex项目如何分配剩余空间</p>
<p><strong>语法</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.item</span> &#123;</span><br><span class="line">    <span class="attribute">flex</span>: <span class="number">1</span>;  <span class="comment">/* 平均分配剩余空间 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>实际例子</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.item1</span> &#123;</span><br><span class="line">    <span class="attribute">flex</span>: <span class="number">1</span>;  <span class="comment">/* 占1份 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.item2</span> &#123;</span><br><span class="line">    <span class="attribute">flex</span>: <span class="number">2</span>;  <span class="comment">/* 占2份（是item1的2倍宽） */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.item3</span> &#123;</span><br><span class="line">    <span class="attribute">flex</span>: <span class="number">1</span>;  <span class="comment">/* 占1份 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>效果</strong>：<code>item2</code>的宽度是<code>item1</code>和<code>item3</code>的2倍。</p>
<blockquote>
<p>💡 <strong>生活类比</strong>：<br />
<code>flex</code>就像"分蛋糕"：</p>
<ul>
<li><p><code>flex: 1</code> = 分1份</p></li>
<li><p><code>flex: 2</code> = 分2份（是1份的2倍）</p></li>
<li><p><code>flex: 3</code> = 分3份（是1份的3倍）</p></li>
</ul>
</blockquote>
<hr />
<h2 id="实战案例实现导航栏布局">3.4 实战案例：实现导航栏布局</h2>
<h3 id="需求分析">3.4.1 需求分析</h3>
<p>我们要做一个<strong>导航栏</strong>，包含：</p>
<ul>
<li>左侧：网站Logo</li>
<li>右侧：导航链接（首页、关于、服务、联系）</li>
</ul>
<p><strong>布局要求</strong>：</p>
<ul>
<li>Logo在左边，导航链接在右边</li>
<li>导航链接横向排列</li>
<li>所有内容垂直居中</li>
</ul>
<hr />
<h3 id="html结构">3.4.2 HTML结构</h3>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">header</span> <span class="attr">class</span>=<span class="string">&quot;navbar&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;logo&quot;</span>&gt;</span>我的网站<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">nav</span> <span class="attr">class</span>=<span class="string">&quot;nav-links&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>首页<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>关于<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>服务<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>联系<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br></pre></td></tr></table></figure>
<hr />
<h3 id="css样式完整代码">3.4.3 CSS样式（完整代码）</h3>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 导航栏容器：使用Flex布局 */</span></span><br><span class="line"><span class="selector-class">.navbar</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;                    <span class="comment">/* 开启Flex布局 */</span></span><br><span class="line">    <span class="attribute">justify-content</span>: space-between;    <span class="comment">/* Logo在左，导航在右 */</span></span><br><span class="line">    <span class="attribute">align-items</span>: center;              <span class="comment">/* 垂直居中 */</span></span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">15px</span> <span class="number">30px</span>;               <span class="comment">/* 内边距 */</span></span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#333</span>;           <span class="comment">/* 深色背景 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* Logo样式 */</span></span><br><span class="line"><span class="selector-class">.logo</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: white;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">24px</span>;</span><br><span class="line">    <span class="attribute">font-weight</span>: bold;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 导航链接容器：也需要Flex布局（让链接横向排列） */</span></span><br><span class="line"><span class="selector-class">.nav-links</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;                    <span class="comment">/* 再次使用Flex布局 */</span></span><br><span class="line">    <span class="attribute">gap</span>: <span class="number">20px</span>;                        <span class="comment">/* 链接之间间距20px */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 导航链接样式 */</span></span><br><span class="line"><span class="selector-class">.nav-links</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: white;</span><br><span class="line">    <span class="attribute">text-decoration</span>: none;            <span class="comment">/* 去除下划线 */</span></span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">8px</span> <span class="number">16px</span>;                <span class="comment">/* 内边距 */</span></span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">4px</span>;               <span class="comment">/* 圆角 */</span></span><br><span class="line">    <span class="attribute">transition</span>: background-color <span class="number">0.3s</span>; <span class="comment">/* 过渡效果 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 链接悬停效果 */</span></span><br><span class="line"><span class="selector-class">.nav-links</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#555</span>;            <span class="comment">/* 悬停时背景变深 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr />
<h3 id="代码解析逐步理解">3.4.4 代码解析（逐步理解）</h3>
<h4 id="第一步让导航栏变成flex容器">第一步：让导航栏变成Flex容器</h4>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.navbar</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;  <span class="comment">/* 开启Flex布局 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>效果</strong>：<code>.navbar</code>内的直接子元素（<code>.logo</code>和<code>.nav-links</code>）会变成Flex项目，横向排列。</p>
<h4
id="第二步让logo和导航链接分布在两端">第二步：让Logo和导航链接分布在两端</h4>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.navbar</span> &#123;</span><br><span class="line">    <span class="attribute">justify-content</span>: space-between;  <span class="comment">/* Logo在左，导航在右 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>效果</strong>：Logo靠左，导航链接靠右，中间留空。</p>
<h4 id="第三步垂直居中">第三步：垂直居中</h4>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.navbar</span> &#123;</span><br><span class="line">    <span class="attribute">align-items</span>: center;  <span class="comment">/* 垂直居中 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>效果</strong>：Logo和导航链接在垂直方向上居中对齐。</p>
<h4 id="第四步让导航链接横向排列">第四步：让导航链接横向排列</h4>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.nav-links</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;  <span class="comment">/* 再次使用Flex布局 */</span></span><br><span class="line">    <span class="attribute">gap</span>: <span class="number">20px</span>;      <span class="comment">/* 链接之间间距 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>效果</strong>：所有链接横向排列，之间有20px的间距。</p>
<hr />
<h3 id="最终效果">3.4.5 最终效果</h3>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">┌─────────────────────────────────────────┐</span><br><span class="line">│  我的网站        首页  关于  服务  联系  │</span><br><span class="line">└─────────────────────────────────────────┘</span><br></pre></td></tr></table></figure>
<ul>
<li>✅ Logo在左边</li>
<li>✅ 导航链接在右边，横向排列</li>
<li>✅ 所有内容垂直居中</li>
<li>✅ 链接之间有间距</li>
<li>✅ 悬停时有交互效果</li>
</ul>
<hr />
<h2 id="更多实战案例">3.5 更多实战案例</h2>
<h3 id="案例1卡片布局三列等宽">案例1：卡片布局（三列等宽）</h3>
<p><strong>需求</strong>：三个卡片横向排列，等宽，间距相等</p>
<p><strong>HTML</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card-container&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card&quot;</span>&gt;</span>卡片1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card&quot;</span>&gt;</span>卡片2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card&quot;</span>&gt;</span>卡片3<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p><strong>CSS</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.card-container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">gap</span>: <span class="number">20px</span>;  <span class="comment">/* 卡片之间间距 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.card</span> &#123;</span><br><span class="line">    <span class="attribute">flex</span>: <span class="number">1</span>;  <span class="comment">/* 每个卡片平均分配空间（等宽） */</span></span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#f0f0f0</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>效果</strong>：三个卡片等宽，横向排列，间距20px。</p>
<hr />
<h3 id="案例2居中布局最常用">案例2：居中布局（最常用！）</h3>
<p><strong>需求</strong>：让一个元素在页面中<strong>完全居中</strong>（水平和垂直都居中）</p>
<p><strong>HTML</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;center-container&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;content&quot;</span>&gt;</span>我要居中！<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p><strong>CSS</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.center-container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">justify-content</span>: center;  <span class="comment">/* 水平居中 */</span></span><br><span class="line">    <span class="attribute">align-items</span>: center;      <span class="comment">/* 垂直居中 */</span></span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100vh</span>;            <span class="comment">/* 容器高度为视口高度 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.content</span> &#123;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#f0f0f0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>效果</strong>：<code>.content</code>在页面中完全居中（水平和垂直都居中）。</p>
<blockquote>
<p>🌟 <strong>这是Flex布局最强大的功能之一！</strong><br />
以前实现完全居中需要写很多代码，现在只需要3行CSS！</p>
</blockquote>
<hr />
<h2 id="常见问题与解决方案">3.6 常见问题与解决方案</h2>
<h3 id="问题1flex项目没有横向排列">问题1：Flex项目没有横向排列？</h3>
<p><strong>可能原因</strong>：</p>
<ul>
<li>忘记写<code>display: flex;</code></li>
<li>Flex项目被其他CSS样式覆盖</li>
</ul>
<p><strong>解决方案</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;  <span class="comment">/* 确保写了这一行 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<hr />
<h3 id="问题2想实现垂直排列">问题2：想实现垂直排列？</h3>
<p><strong>解决方案</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">flex-direction</span>: column;  <span class="comment">/* 改为纵向排列 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<hr />
<h3
id="问题3项目之间的间距怎么设置">问题3：项目之间的间距怎么设置？</h3>
<p><strong>解决方案</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">gap</span>: <span class="number">20px</span>;  <span class="comment">/* 使用gap属性（推荐） */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<hr />
<h2 id="本节总结">3.7 本节总结</h2>
<p>你已经学会了：</p>
<p>✅ <strong>Flex布局的核心概念</strong>：</p>
<ul>
<li>Flex容器和Flex项目</li>
<li>主轴和交叉轴</li>
</ul>
<p>✅ <strong>容器的常用属性</strong>：</p>
<ul>
<li><code>display: flex;</code> - 开启Flex布局</li>
<li><code>flex-direction</code> - 控制排列方向</li>
<li><code>justify-content</code> - 主轴对齐（水平对齐）</li>
<li><code>align-items</code> - 交叉轴对齐（垂直对齐）</li>
<li><code>gap</code> - 项目间距</li>
</ul>
<p>✅ <strong>项目的常用属性</strong>：</p>
<ul>
<li><code>flex</code> - 控制伸缩比例</li>
</ul>
<p>✅ <strong>实战技能</strong>：</p>
<ul>
<li>实现导航栏布局</li>
<li>实现卡片布局</li>
<li>实现居中布局</li>
</ul>
<blockquote>
<p>🌟 <strong>记住</strong>：<br />
Flex布局是现代Web开发的<strong>必备技能</strong>！<br />
掌握了Flex布局，你就能轻松实现90%的常见布局需求。<br />
<strong>多练习，多实践</strong>，把Flex布局变成你的"肌肉记忆"！</p>
</blockquote>
<hr />
<h1 id="媒体查询应用让网页智能适配">4.
媒体查询应用：让网页"智能适配"</h1>
<h2 id="为什么需要媒体查询">4.1 为什么需要媒体查询？</h2>
<h3 id="问题的出现一个网页多种设备">4.1.1
问题的出现：一个网页，多种设备</h3>
<p><strong>生活场景</strong>：<br />
想象你设计了一件衣服：</p>
<ul>
<li>在模特身上很好看（桌面电脑）</li>
<li>但给小朋友穿就太大了（手机）</li>
<li>给高个子穿又太小了（平板）</li>
</ul>
<p><strong>网页的困境</strong>：</p>
<ul>
<li>在电脑上：三列布局，看起来很舒服</li>
<li>在手机上：三列挤在一起，字太小，根本看不清</li>
<li>在平板上：布局不协调，体验很差</li>
</ul>
<p><strong>传统解决方案</strong>（很麻烦）： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 方法1：为不同设备写不同的网页 --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 电脑版：desktop.html --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 手机版：mobile.html --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 平板版：tablet.html --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 问题：维护3个网站，成本太高！ --&gt;</span></span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>💡 <strong>核心问题</strong>：<br />
一个网页，需要在<strong>不同尺寸的屏幕上</strong>都能正常显示。<br />
就像一件衣服，要能适应不同身材的人。</p>
</blockquote>
<hr />
<h3 id="媒体查询的诞生2012年">4.1.2 媒体查询的诞生（2012年）</h3>
<p><strong>2012年，CSS3正式引入媒体查询（Media
Queries）</strong>，让一个网页可以"智能适配"不同设备：</p>
<table>
<thead>
<tr class="header">
<th>传统方式</th>
<th>媒体查询方式</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>为每个设备写一个网页</td>
<td><strong>一个网页，自动适配</strong></td>
</tr>
<tr class="even">
<td>维护成本高</td>
<td>维护成本低</td>
</tr>
<tr class="odd">
<td>用户体验差</td>
<td>用户体验好</td>
</tr>
<tr class="even">
<td>加载慢（需要判断设备）</td>
<td>加载快（CSS自动判断）</td>
</tr>
</tbody>
</table>
<blockquote>
<p>🌟 <strong>历史意义</strong>：<br />
媒体查询让"响应式设计"成为可能，是现代Web开发的<strong>标准做法</strong>。</p>
</blockquote>
<hr />
<h2 id="什么是媒体查询">4.2 什么是媒体查询？</h2>
<h3 id="生活类比">4.2.1 生活类比</h3>
<p><strong>媒体查询</strong>就像"智能空调"：</p>
<ul>
<li>温度&gt;30°C → 自动开启制冷</li>
<li>温度&lt;20°C → 自动开启制热</li>
<li>温度20-30°C → 自动关闭</li>
</ul>
<p><strong>媒体查询</strong>：</p>
<ul>
<li>屏幕宽度&gt;768px → 应用桌面样式（三列布局）</li>
<li>屏幕宽度&lt;768px → 应用手机样式（单列布局）</li>
<li>屏幕宽度768-1024px → 应用平板样式（两列布局）</li>
</ul>
<hr />
<h3 id="媒体查询的定义">4.2.2 媒体查询的定义</h3>
<p><strong>媒体查询</strong> = CSS的"条件判断"<br />
根据设备的特性（屏幕宽度、高度、方向等），应用不同的CSS样式。</p>
<p><strong>基本语法</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@media</span> (条件) &#123;</span><br><span class="line">    <span class="comment">/* 当条件满足时，应用这些样式 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>实际例子</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 默认样式（所有设备） */</span></span><br><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 当屏幕宽度小于768px时，应用这些样式 */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">    <span class="selector-class">.container</span> &#123;</span><br><span class="line">        <span class="attribute">flex-direction</span>: column;  <span class="comment">/* 改为纵向排列 */</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>效果</strong>：</p>
<ul>
<li>屏幕宽度 &gt; 768px：<code>.container</code>内的元素横向排列</li>
<li>屏幕宽度 ≤ 768px：<code>.container</code>内的元素纵向排列</li>
</ul>
<hr />
<h2 id="媒体查询的语法详解">4.3 媒体查询的语法详解</h2>
<h3 id="基本语法结构">4.3.1 基本语法结构</h3>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@media</span> [媒体类型] <span class="keyword">and</span> (条件) &#123;</span><br><span class="line">    <span class="comment">/* CSS样式 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>组成部分</strong>：</p>
<table>
<thead>
<tr class="header">
<th>部分</th>
<th>说明</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><code>@media</code></td>
<td>媒体查询的关键字</td>
<td>必须写</td>
</tr>
<tr class="even">
<td><code>媒体类型</code></td>
<td>设备类型（可选）</td>
<td><code>screen</code>（屏幕）、<code>print</code>（打印）</td>
</tr>
<tr class="odd">
<td><code>and</code></td>
<td>逻辑运算符</td>
<td>连接多个条件</td>
</tr>
<tr class="even">
<td><code>(条件)</code></td>
<td>具体的判断条件</td>
<td><code>max-width: 768px</code></td>
</tr>
</tbody>
</table>
<hr />
<h3 id="常用的媒体类型">4.3.2 常用的媒体类型</h3>
<table>
<thead>
<tr class="header">
<th>媒体类型</th>
<th>说明</th>
<th>使用场景</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><code>screen</code></td>
<td>屏幕设备（默认）</td>
<td>电脑、手机、平板</td>
</tr>
<tr class="even">
<td><code>print</code></td>
<td>打印设备</td>
<td>打印网页时</td>
</tr>
<tr class="odd">
<td><code>all</code></td>
<td>所有设备</td>
<td>不常用</td>
</tr>
</tbody>
</table>
<p><strong>实际例子</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 屏幕设备 */</span></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">    <span class="comment">/* 样式 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 打印设备 */</span></span><br><span class="line"><span class="keyword">@media</span> print &#123;</span><br><span class="line">    <span class="comment">/* 打印时的样式 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>💡 <strong>注意</strong>：<br />
大多数情况下，我们只需要写<code>@media (条件)</code>，不需要写<code>screen</code>，因为默认就是屏幕设备。</p>
</blockquote>
<hr />
<h3 id="常用的媒体特性条件">4.3.3 常用的媒体特性（条件）</h3>
<table style="width:100%;">
<colgroup>
<col style="width: 42%" />
<col style="width: 28%" />
<col style="width: 28%" />
</colgroup>
<thead>
<tr class="header">
<th>媒体特性</th>
<th>说明</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><code>max-width</code></td>
<td>最大宽度（小于等于）</td>
<td><code>max-width: 768px</code>（宽度≤768px）</td>
</tr>
<tr class="even">
<td><code>min-width</code></td>
<td>最小宽度（大于等于）</td>
<td><code>min-width: 768px</code>（宽度≥768px）</td>
</tr>
<tr class="odd">
<td><code>max-height</code></td>
<td>最大高度</td>
<td><code>max-height: 600px</code></td>
</tr>
<tr class="even">
<td><code>min-height</code></td>
<td>最小高度</td>
<td><code>min-height: 600px</code></td>
</tr>
<tr class="odd">
<td><code>orientation</code></td>
<td>设备方向</td>
<td><code>orientation: portrait</code>（竖屏）<br><code>orientation: landscape</code>（横屏）</td>
</tr>
</tbody>
</table>
<p><strong>实际例子</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 当屏幕宽度小于等于768px时 */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">    <span class="selector-tag">body</span> &#123;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 当屏幕宽度大于等于1024px时 */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">1024px</span>) &#123;</span><br><span class="line">    <span class="selector-tag">body</span> &#123;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 当设备是竖屏时 */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">orientation</span>: portrait) &#123;</span><br><span class="line">    <span class="selector-class">.sidebar</span> &#123;</span><br><span class="line">        <span class="attribute">display</span>: none;  <span class="comment">/* 隐藏侧边栏 */</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>💡 <strong>记忆技巧</strong>：</p>
<ul>
<li><code>max-width: 768px</code> =
"宽度<strong>最多</strong>768px"（≤768px）<br />
</li>
<li><code>min-width: 768px</code> =
"宽度<strong>至少</strong>768px"（≥768px）</li>
</ul>
</blockquote>
<hr />
<h2 id="响应式设计的断点breakpoint">4.4
响应式设计的断点（Breakpoint）</h2>
<h3 id="什么是断点">4.4.1 什么是断点？</h3>
<p><strong>生活类比</strong>：<br />
断点就像"温度计上的刻度"：</p>
<ul>
<li>0°C → 结冰</li>
<li>100°C → 沸腾</li>
</ul>
<p><strong>响应式设计的断点</strong>：</p>
<ul>
<li>768px → 手机和电脑的分界线</li>
<li>1024px → 平板和电脑的分界线</li>
</ul>
<p><strong>断点</strong> = 根据屏幕宽度，改变页面布局的"临界点"</p>
<hr />
<h3 id="常用的断点值">4.4.2 常用的断点值</h3>
<table>
<colgroup>
<col style="width: 33%" />
<col style="width: 33%" />
<col style="width: 33%" />
</colgroup>
<thead>
<tr class="header">
<th>设备类型</th>
<th>屏幕宽度</th>
<th>常用断点</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>手机</strong></td>
<td>&lt; 768px</td>
<td><code>max-width: 768px</code></td>
</tr>
<tr class="even">
<td><strong>平板</strong></td>
<td>768px - 1024px</td>
<td><code>min-width: 768px</code> 和 <code>max-width: 1024px</code></td>
</tr>
<tr class="odd">
<td><strong>电脑</strong></td>
<td>&gt; 1024px</td>
<td><code>min-width: 1024px</code></td>
</tr>
</tbody>
</table>
<p><strong>实际例子</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 手机样式（默认，移动优先） */</span></span><br><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">flex-direction</span>: column;  <span class="comment">/* 单列布局 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 平板样式（≥768px） */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">    <span class="selector-class">.container</span> &#123;</span><br><span class="line">        <span class="attribute">flex-direction</span>: row;  <span class="comment">/* 两列布局 */</span></span><br><span class="line">        <span class="attribute">flex-wrap</span>: wrap;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-class">.item</span> &#123;</span><br><span class="line">        <span class="attribute">flex</span>: <span class="number">1</span> <span class="number">1</span> <span class="number">50%</span>;  <span class="comment">/* 每个项目占50%宽度 */</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 电脑样式（≥1024px） */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">1024px</span>) &#123;</span><br><span class="line">    <span class="selector-class">.item</span> &#123;</span><br><span class="line">        <span class="attribute">flex</span>: <span class="number">1</span> <span class="number">1</span> <span class="number">33.33%</span>;  <span class="comment">/* 每个项目占33.33%宽度（三列） */</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<hr />
<h3 id="移动优先mobile-first策略">4.4.3 移动优先（Mobile
First）策略</h3>
<p><strong>什么是移动优先？</strong></p>
<p><strong>传统方式</strong>（桌面优先）： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 先写桌面样式 */</span></span><br><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;  <span class="comment">/* 三列布局 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 再用媒体查询覆盖（手机） */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">    <span class="selector-class">.container</span> &#123;</span><br><span class="line">        <span class="attribute">flex-direction</span>: column;  <span class="comment">/* 单列布局 */</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>移动优先方式</strong>（推荐）： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 先写手机样式（默认） */</span></span><br><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">flex-direction</span>: column;  <span class="comment">/* 单列布局 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 再用媒体查询增强（平板、电脑） */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">    <span class="selector-class">.container</span> &#123;</span><br><span class="line">        <span class="attribute">flex-direction</span>: row;  <span class="comment">/* 横向布局 */</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>为什么推荐移动优先？</strong></p>
<table>
<thead>
<tr class="header">
<th>优势</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>性能更好</strong></td>
<td>手机用户先加载简单样式，加载更快</td>
</tr>
<tr class="even">
<td><strong>代码更简洁</strong></td>
<td>从简单到复杂，逻辑更清晰</td>
</tr>
<tr class="odd">
<td><strong>符合趋势</strong></td>
<td>现在手机用户比电脑用户多</td>
</tr>
</tbody>
</table>
<blockquote>
<p>💡 <strong>记忆技巧</strong>：<br />
移动优先 = "先写手机样式，再用媒体查询增强"<br />
就像"先搭好基础框架，再逐步完善"</p>
</blockquote>
<hr />
<h2 id="实战案例制作自适应页面">4.5 实战案例：制作自适应页面</h2>
<h3 id="需求分析-1">4.5.1 需求分析</h3>
<p>我们要做一个<strong>响应式卡片布局</strong>：</p>
<ul>
<li><strong>手机</strong>（&lt; 768px）：单列布局，卡片占满宽度</li>
<li><strong>平板</strong>（768px - 1024px）：两列布局</li>
<li><strong>电脑</strong>（&gt; 1024px）：三列布局</li>
</ul>
<hr />
<h3 id="html结构-1">4.5.2 HTML结构</h3>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;zh-CN&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>响应式卡片布局<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;style.css&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;container&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card&quot;</span>&gt;</span>卡片1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card&quot;</span>&gt;</span>卡片2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card&quot;</span>&gt;</span>卡片3<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card&quot;</span>&gt;</span>卡片4<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card&quot;</span>&gt;</span>卡片5<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card&quot;</span>&gt;</span>卡片6<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>⚠️ <strong>重要提醒</strong>：<br />
必须在<code>&lt;head&gt;</code>中添加： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>
这行代码告诉浏览器"按设备宽度显示"，<strong>没有这行，媒体查询可能不生效！</strong></p>
</blockquote>
<hr />
<h3 id="css样式完整代码-1">4.5.3 CSS样式（完整代码）</h3>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* ===== 基础样式（手机，移动优先） ===== */</span></span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">&#x27;微软雅黑&#x27;</span>, Arial, sans-serif;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">flex-direction</span>: column;  <span class="comment">/* 手机：单列布局 */</span></span><br><span class="line">    <span class="attribute">gap</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.card</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#f0f0f0</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">2px</span> <span class="number">4px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.1</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* ===== 平板样式（≥768px） ===== */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">    <span class="selector-class">.container</span> &#123;</span><br><span class="line">        <span class="attribute">flex-direction</span>: row;  <span class="comment">/* 改为横向排列 */</span></span><br><span class="line">        <span class="attribute">flex-wrap</span>: wrap;      <span class="comment">/* 允许换行 */</span></span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="selector-class">.card</span> &#123;</span><br><span class="line">        <span class="attribute">flex</span>: <span class="number">1</span> <span class="number">1</span> <span class="built_in">calc</span>(<span class="number">50%</span> - <span class="number">10px</span>);  <span class="comment">/* 每个卡片占50%宽度（两列） */</span></span><br><span class="line">        <span class="comment">/* calc(50% - 10px) 是为了减去gap的一半 */</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* ===== 电脑样式（≥1024px） ===== */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">1024px</span>) &#123;</span><br><span class="line">    <span class="selector-class">.card</span> &#123;</span><br><span class="line">        <span class="attribute">flex</span>: <span class="number">1</span> <span class="number">1</span> <span class="built_in">calc</span>(<span class="number">33.33%</span> - <span class="number">14px</span>);  <span class="comment">/* 每个卡片占33.33%宽度（三列） */</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr />
<h3 id="代码解析逐步理解-1">4.5.4 代码解析（逐步理解）</h3>
<h4 id="第一步手机样式默认">第一步：手机样式（默认）</h4>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">flex-direction</span>: column;  <span class="comment">/* 单列布局 */</span></span><br><span class="line">    <span class="attribute">gap</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>效果</strong>：所有卡片垂直排列，每个卡片占满宽度。</p>
<h4 id="第二步平板样式768px">第二步：平板样式（≥768px）</h4>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">    <span class="selector-class">.container</span> &#123;</span><br><span class="line">        <span class="attribute">flex-direction</span>: row;  <span class="comment">/* 改为横向排列 */</span></span><br><span class="line">        <span class="attribute">flex-wrap</span>: wrap;       <span class="comment">/* 允许换行 */</span></span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="selector-class">.card</span> &#123;</span><br><span class="line">        <span class="attribute">flex</span>: <span class="number">1</span> <span class="number">1</span> <span class="built_in">calc</span>(<span class="number">50%</span> - <span class="number">10px</span>);  <span class="comment">/* 两列布局 */</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>效果</strong>：卡片横向排列，每行显示2个卡片。</p>
<h4 id="第三步电脑样式1024px">第三步：电脑样式（≥1024px）</h4>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">1024px</span>) &#123;</span><br><span class="line">    <span class="selector-class">.card</span> &#123;</span><br><span class="line">        <span class="attribute">flex</span>: <span class="number">1</span> <span class="number">1</span> <span class="built_in">calc</span>(<span class="number">33.33%</span> - <span class="number">14px</span>);  <span class="comment">/* 三列布局 */</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>效果</strong>：每行显示3个卡片。</p>
<hr />
<h3 id="最终效果-1">4.5.5 最终效果</h3>
<p><strong>手机（&lt; 768px）</strong>： <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">┌─────────────┐</span><br><span class="line">│   卡片1     │</span><br><span class="line">└─────────────┘</span><br><span class="line">┌─────────────┐</span><br><span class="line">│   卡片2     │</span><br><span class="line">└─────────────┘</span><br><span class="line">┌─────────────┐</span><br><span class="line">│   卡片3     │</span><br><span class="line">└─────────────┘</span><br></pre></td></tr></table></figure></p>
<p><strong>平板（768px - 1024px）</strong>： <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">┌──────────┐ ┌──────────┐</span><br><span class="line">│  卡片1   │ │  卡片2   │</span><br><span class="line">└──────────┘ └──────────┘</span><br><span class="line">┌──────────┐ ┌──────────┐</span><br><span class="line">│  卡片3   │ │  卡片4   │</span><br><span class="line">└──────────┘ └──────────┘</span><br></pre></td></tr></table></figure></p>
<p><strong>电脑（&gt; 1024px）</strong>： <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">┌────────┐ ┌────────┐ ┌────────┐</span><br><span class="line">│ 卡片1  │ │ 卡片2  │ │ 卡片3  │</span><br><span class="line">└────────┘ └────────┘ └────────┘</span><br><span class="line">┌────────┐ ┌────────┐ ┌────────┐</span><br><span class="line">│ 卡片4  │ │ 卡片5  │ │ 卡片6  │</span><br><span class="line">└────────┘ └────────┘ └────────┘</span><br></pre></td></tr></table></figure></p>
<hr />
<h2 id="更多实战案例-1">4.6 更多实战案例</h2>
<h3 id="案例1响应式导航栏">案例1：响应式导航栏</h3>
<p><strong>需求</strong>：电脑上显示横向导航，手机上显示汉堡菜单</p>
<p><strong>HTML</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">nav</span> <span class="attr">class</span>=<span class="string">&quot;navbar&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;logo&quot;</span>&gt;</span>我的网站<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;nav-menu&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>首页<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>关于<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>服务<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>联系<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;menu-toggle&quot;</span>&gt;</span>☰<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p><strong>CSS</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 手机样式（默认） */</span></span><br><span class="line"><span class="selector-class">.navbar</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">justify-content</span>: space-between;</span><br><span class="line">    <span class="attribute">align-items</span>: center;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">15px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.nav-menu</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;  <span class="comment">/* 手机：隐藏菜单 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.menu-toggle</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: block;  <span class="comment">/* 手机：显示汉堡按钮 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 电脑样式（≥768px） */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">    <span class="selector-class">.nav-menu</span> &#123;</span><br><span class="line">        <span class="attribute">display</span>: flex;  <span class="comment">/* 电脑：显示菜单 */</span></span><br><span class="line">        <span class="attribute">gap</span>: <span class="number">20px</span>;</span><br><span class="line">        <span class="attribute">list-style</span>: none;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="selector-class">.menu-toggle</span> &#123;</span><br><span class="line">        <span class="attribute">display</span>: none;  <span class="comment">/* 电脑：隐藏汉堡按钮 */</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<hr />
<h3 id="案例2响应式字体大小">案例2：响应式字体大小</h3>
<p><strong>需求</strong>：根据屏幕宽度调整字体大小</p>
<p><strong>CSS</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 手机：小字体 */</span></span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">14px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 平板：中等字体 */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">    <span class="selector-tag">body</span> &#123;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 电脑：大字体 */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">1024px</span>) &#123;</span><br><span class="line">    <span class="selector-tag">body</span> &#123;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<hr />
<h2 id="常见问题与解决方案-1">4.7 常见问题与解决方案</h2>
<h3 id="问题1媒体查询不生效">问题1：媒体查询不生效？</h3>
<p><strong>可能原因</strong>：</p>
<ol type="1">
<li>忘记添加<code>viewport</code>元标签</li>
<li>媒体查询语法错误</li>
<li>CSS优先级问题</li>
</ol>
<p><strong>解决方案</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 1. 确保HTML中有这行 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 2. 检查语法是否正确 */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) &#123;  <span class="comment">/* 注意：括号和冒号 */</span></span><br><span class="line">    <span class="comment">/* 样式 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 3. 如果还是不生效，提高优先级 */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">    <span class="selector-class">.container</span><span class="selector-class">.container</span> &#123;  <span class="comment">/* 重复类名提高优先级 */</span></span><br><span class="line">        <span class="attribute">flex-direction</span>: column;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr />
<h3 id="问题2断点值应该选多少">问题2：断点值应该选多少？</h3>
<p><strong>推荐断点</strong>（根据主流设备）：</p>
<ul>
<li><strong>手机</strong>：<code>max-width: 767px</code> 或
<code>max-width: 575px</code></li>
<li><strong>平板</strong>：<code>min-width: 768px</code> 和
<code>max-width: 1023px</code></li>
<li><strong>电脑</strong>：<code>min-width: 1024px</code></li>
</ul>
<p><strong>实际建议</strong>：</p>
<ul>
<li>不要设置太多断点（3-4个足够）</li>
<li>根据实际内容调整，不要死记硬背</li>
<li>使用浏览器开发者工具测试（F12 → 设备工具栏）</li>
</ul>
<hr />
<h3 id="问题3移动优先还是桌面优先">问题3：移动优先还是桌面优先？</h3>
<p><strong>推荐：移动优先</strong></p>
<p><strong>原因</strong>：</p>
<ul>
<li>手机用户更多</li>
<li>性能更好（先加载简单样式）</li>
<li>代码更简洁（从简单到复杂）</li>
</ul>
<p><strong>写法</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 移动优先：先写手机样式 */</span></span><br><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="comment">/* 手机样式 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 再用媒体查询增强 */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">    <span class="selector-class">.container</span> &#123;</span><br><span class="line">        <span class="comment">/* 平板/电脑样式 */</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<hr />
<h2 id="本节总结-1">4.8 本节总结</h2>
<p>你已经学会了：</p>
<p>✅ <strong>媒体查询的核心概念</strong>：</p>
<ul>
<li>什么是媒体查询</li>
<li>为什么需要媒体查询</li>
</ul>
<p>✅ <strong>媒体查询的语法</strong>：</p>
<ul>
<li>基本语法结构</li>
<li>常用的媒体类型和特性</li>
<li><code>max-width</code>和<code>min-width</code>的区别</li>
</ul>
<p>✅ <strong>响应式设计策略</strong>：</p>
<ul>
<li>断点的概念</li>
<li>移动优先策略</li>
<li>常用断点值</li>
</ul>
<p>✅ <strong>实战技能</strong>：</p>
<ul>
<li>制作自适应页面布局</li>
<li>响应式导航栏</li>
<li>响应式字体大小</li>
</ul>
<blockquote>
<p>🌟 <strong>记住</strong>：<br />
媒体查询是实现响应式设计的<strong>核心工具</strong>！<br />
掌握了媒体查询，你就能让网页在各种设备上都有良好的体验。<br />
<strong>一个网页，适配所有设备</strong>，这就是现代Web开发的魅力！</p>
</blockquote>
<hr />
<h1 id="ai实战使用ai生成响应式布局">5. AI实战：使用AI生成响应式布局</h1>
<h2 id="为什么用ai生成响应式布局">5.1 为什么用AI生成响应式布局？</h2>
<h3 id="响应式布局的复杂性">5.1.1 响应式布局的复杂性</h3>
<p>还记得我们刚才学的媒体查询吗？要实现一个完整的响应式布局，需要：</p>
<ul>
<li>写基础样式（手机）</li>
<li>写平板样式（媒体查询）</li>
<li>写电脑样式（媒体查询）</li>
<li>测试不同设备</li>
<li>调试各种问题</li>
</ul>
<p><strong>工作量</strong>：一个简单的响应式页面，可能需要写100+行CSS代码。</p>
<hr />
<h3 id="ai的优势">5.1.2 AI的优势</h3>
<p><strong>AI可以帮你</strong>：</p>
<ul>
<li>✅ 快速生成完整的响应式布局代码</li>
<li>✅ 自动处理不同设备的适配</li>
<li>✅ 生成符合最佳实践的代码</li>
<li>✅ 节省大量时间</li>
</ul>
<p><strong>你的工作</strong>：</p>
<ul>
<li>✅ 描述需求（写Prompt）</li>
<li>✅ 测试效果</li>
<li>✅ 微调细节</li>
</ul>
<blockquote>
<p>💡 <strong>生活类比</strong>：<br />
以前：自己画设计图 → 自己写代码 → 自己调试（3天）<br />
现在：告诉AI需求 → AI生成代码 → 你测试调整（3小时）</p>
</blockquote>
<hr />
<h2 id="实战案例用ai生成响应式导航栏">5.2
实战案例：用AI生成响应式导航栏</h2>
<h3 id="第一步设计prompt">5.2.1 第一步：设计Prompt</h3>
<p><strong>目标</strong>：生成一个响应式导航栏</p>
<p><strong>Prompt示例</strong>： <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">用HTML和CSS创建一个响应式导航栏，要求：</span><br><span class="line">1. 包含Logo（左侧）和导航链接（右侧）</span><br><span class="line">2. 电脑上：横向显示所有链接</span><br><span class="line">3. 手机上：显示汉堡菜单按钮，点击后展开菜单</span><br><span class="line">4. 使用Flex布局和媒体查询</span><br><span class="line">5. 样式现代化，有悬停效果</span><br><span class="line">6. 代码注释清晰</span><br></pre></td></tr></table></figure></p>
<hr />
<h3 id="ai生成的代码示例">5.2.2 AI生成的代码（示例）</h3>
<p><strong>HTML</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;zh-CN&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>响应式导航栏<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;style.css&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">nav</span> <span class="attr">class</span>=<span class="string">&quot;navbar&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;logo&quot;</span>&gt;</span>我的网站<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;nav-menu&quot;</span> <span class="attr">id</span>=<span class="string">&quot;navMenu&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>首页<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>关于<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>服务<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>联系<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;menu-toggle&quot;</span> <span class="attr">id</span>=<span class="string">&quot;menuToggle&quot;</span>&gt;</span>☰<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p><strong>CSS</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* ===== 基础样式 ===== */</span></span><br><span class="line">* &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.navbar</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">justify-content</span>: space-between;</span><br><span class="line">    <span class="attribute">align-items</span>: center;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">15px</span> <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#333</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.logo</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: white;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">24px</span>;</span><br><span class="line">    <span class="attribute">font-weight</span>: bold;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.nav-menu</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">list-style</span>: none;</span><br><span class="line">    <span class="attribute">gap</span>: <span class="number">30px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.nav-menu</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: white;</span><br><span class="line">    <span class="attribute">text-decoration</span>: none;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">8px</span> <span class="number">16px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">4px</span>;</span><br><span class="line">    <span class="attribute">transition</span>: background-color <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.nav-menu</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#555</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.menu-toggle</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;  <span class="comment">/* 电脑上隐藏 */</span></span><br><span class="line">    <span class="attribute">background</span>: none;</span><br><span class="line">    <span class="attribute">border</span>: none;</span><br><span class="line">    <span class="attribute">color</span>: white;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">24px</span>;</span><br><span class="line">    <span class="attribute">cursor</span>: pointer;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* ===== 手机样式（≤768px） ===== */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">max-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">    <span class="selector-class">.nav-menu</span> &#123;</span><br><span class="line">        <span class="attribute">position</span>: fixed;</span><br><span class="line">        <span class="attribute">top</span>: <span class="number">60px</span>;</span><br><span class="line">        <span class="attribute">left</span>: -<span class="number">100%</span>;  <span class="comment">/* 默认隐藏 */</span></span><br><span class="line">        <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">        <span class="attribute">flex-direction</span>: column;</span><br><span class="line">        <span class="attribute">background-color</span>: <span class="number">#333</span>;</span><br><span class="line">        <span class="attribute">padding</span>: <span class="number">20px</span>;</span><br><span class="line">        <span class="attribute">transition</span>: left <span class="number">0.3s</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="selector-class">.nav-menu</span><span class="selector-class">.active</span> &#123;</span><br><span class="line">        <span class="attribute">left</span>: <span class="number">0</span>;  <span class="comment">/* 展开时显示 */</span></span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="selector-class">.menu-toggle</span> &#123;</span><br><span class="line">        <span class="attribute">display</span>: block;  <span class="comment">/* 手机上显示 */</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>JavaScript</strong>（AI可能也会生成）： <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 切换菜单显示/隐藏</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;menuToggle&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;navMenu&#x27;</span>).<span class="property">classList</span>.<span class="title function_">toggle</span>(<span class="string">&#x27;active&#x27;</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></p>
<hr />
<h3 id="测试和优化">5.2.3 测试和优化</h3>
<p><strong>测试步骤</strong>：</p>
<ol type="1">
<li>在浏览器中打开页面</li>
<li>按F12打开开发者工具</li>
<li>点击"设备工具栏"图标（或按Ctrl+Shift+M）</li>
<li>选择不同设备测试（iPhone、iPad、Desktop）</li>
</ol>
<p><strong>可能需要的优化</strong>：</p>
<ul>
<li>调整断点值</li>
<li>修改颜色和间距</li>
<li>优化动画效果</li>
</ul>
<hr />
<h2 id="实战案例用ai生成响应式卡片布局">5.3
实战案例：用AI生成响应式卡片布局</h2>
<h3 id="prompt设计">5.3.1 Prompt设计</h3>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">用HTML和CSS创建一个响应式卡片布局，要求：</span><br><span class="line">1. 使用Flex布局</span><br><span class="line">2. 手机：单列布局，卡片占满宽度</span><br><span class="line">3. 平板：两列布局</span><br><span class="line">4. 电脑：三列布局</span><br><span class="line">5. 使用移动优先策略</span><br><span class="line">6. 卡片有阴影和圆角效果</span><br><span class="line">7. 代码注释清晰，使用媒体查询</span><br></pre></td></tr></table></figure>
<hr />
<h3 id="ai生成的代码优化版">5.3.2 AI生成的代码（优化版）</h3>
<p><strong>HTML</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;zh-CN&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>响应式卡片布局<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;style.css&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;container&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">h3</span>&gt;</span>卡片标题1<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>这是卡片的内容描述...<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">h3</span>&gt;</span>卡片标题2<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>这是卡片的内容描述...<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">h3</span>&gt;</span>卡片标题3<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>这是卡片的内容描述...<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">h3</span>&gt;</span>卡片标题4<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>这是卡片的内容描述...<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">h3</span>&gt;</span>卡片标题5<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>这是卡片的内容描述...<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">h3</span>&gt;</span>卡片标题6<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">p</span>&gt;</span>这是卡片的内容描述...<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p><strong>CSS</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* ===== 基础样式（手机，移动优先） ===== */</span></span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">&#x27;微软雅黑&#x27;</span>, Arial, sans-serif;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#f5f5f5</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">flex-direction</span>: column;  <span class="comment">/* 手机：单列布局 */</span></span><br><span class="line">    <span class="attribute">gap</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">max-width</span>: <span class="number">1200px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.card</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: white;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">2px</span> <span class="number">8px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.1</span>);</span><br><span class="line">    <span class="attribute">transition</span>: transform <span class="number">0.3s</span>, box-shadow <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.card</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">5px</span>);  <span class="comment">/* 悬停时上移 */</span></span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">4px</span> <span class="number">12px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.15</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.card</span> <span class="selector-tag">h3</span> &#123;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#333</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.card</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#666</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">1.6</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* ===== 平板样式（≥768px） ===== */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">    <span class="selector-class">.container</span> &#123;</span><br><span class="line">        <span class="attribute">flex-direction</span>: row;  <span class="comment">/* 改为横向排列 */</span></span><br><span class="line">        <span class="attribute">flex-wrap</span>: wrap;      <span class="comment">/* 允许换行 */</span></span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="selector-class">.card</span> &#123;</span><br><span class="line">        <span class="attribute">flex</span>: <span class="number">1</span> <span class="number">1</span> <span class="built_in">calc</span>(<span class="number">50%</span> - <span class="number">10px</span>);  <span class="comment">/* 两列布局 */</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* ===== 电脑样式（≥1024px） ===== */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">1024px</span>) &#123;</span><br><span class="line">    <span class="selector-class">.card</span> &#123;</span><br><span class="line">        <span class="attribute">flex</span>: <span class="number">1</span> <span class="number">1</span> <span class="built_in">calc</span>(<span class="number">33.33%</span> - <span class="number">14px</span>);  <span class="comment">/* 三列布局 */</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<hr />
<h2 id="ai生成代码的优化技巧">5.4 AI生成代码的优化技巧</h2>
<h3 id="如何写出更好的prompt">5.4.1 如何写出更好的Prompt？</h3>
<p><strong>不好的Prompt</strong>： <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">写一个响应式布局</span><br></pre></td></tr></table></figure>
<strong>问题</strong>：太模糊，AI不知道具体需求</p>
<p><strong>好的Prompt</strong>： <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">用HTML和CSS创建一个响应式卡片布局，要求：</span><br><span class="line">1. 使用Flex布局和移动优先策略</span><br><span class="line">2. 手机（&lt;768px）：单列布局</span><br><span class="line">3. 平板（768-1024px）：两列布局</span><br><span class="line">4. 电脑（&gt;1024px）：三列布局</span><br><span class="line">5. 卡片有阴影、圆角、悬停效果</span><br><span class="line">6. 代码注释清晰，使用语义化HTML标签</span><br></pre></td></tr></table></figure>
<strong>优点</strong>：具体、清晰、有要求</p>
<hr />
<h3 id="迭代优化一步步完善">5.4.2 迭代优化：一步步完善</h3>
<p><strong>第一版Prompt</strong>：生成基础布局 <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">创建一个响应式卡片布局</span><br></pre></td></tr></table></figure></p>
<p><strong>第二版Prompt</strong>：添加样式要求 <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">在刚才的基础上，添加：</span><br><span class="line">- 卡片阴影效果</span><br><span class="line">- 悬停动画</span><br><span class="line">- 现代化配色</span><br></pre></td></tr></table></figure></p>
<p><strong>第三版Prompt</strong>：优化细节 <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">调整间距和字体大小，让布局更协调</span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>💡 <strong>技巧</strong>：<br />
不要一次要求太多，<strong>分步骤</strong>让AI生成，更容易得到好结果。</p>
</blockquote>
<hr />
<h3 id="检查ai生成的代码">5.4.3 检查AI生成的代码</h3>
<p><strong>必须检查的点</strong>：</p>
<ul>
<li><p>✅ 是否添加了<code>viewport</code>元标签？</p></li>
<li><p>✅ 媒体查询语法是否正确？</p></li>
<li><p>✅ 断点值是否合理？</p></li>
<li><p>✅ 代码是否符合移动优先策略？</p></li>
<li><p>✅ 是否有明显的bug？</p></li>
</ul>
<p><strong>测试方法</strong>：</p>
<ol type="1">
<li>在浏览器中打开</li>
<li>用F12开发者工具测试不同设备</li>
<li>检查是否有布局问题</li>
</ol>
<hr />
<h2 id="常见问题与解决方案-2">5.5 常见问题与解决方案</h2>
<h3 id="问题1ai生成的代码不工作">问题1：AI生成的代码不工作？</h3>
<p><strong>可能原因</strong>：</p>
<ul>
<li>缺少<code>viewport</code>元标签</li>
<li>CSS文件路径错误</li>
<li>语法错误</li>
</ul>
<p><strong>解决方案</strong>： <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 确保有这行 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 检查CSS文件路径 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;style.css&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>
<hr />
<h3
id="问题2ai生成的代码不符合需求">问题2：AI生成的代码不符合需求？</h3>
<p><strong>解决方案</strong>：</p>
<ol type="1">
<li><strong>更详细地描述需求</strong>（写更具体的Prompt）</li>
<li><strong>分步骤生成</strong>（先基础布局，再添加样式）</li>
<li><strong>手动调整</strong>（AI生成的是起点，不是终点）</li>
</ol>
<hr />
<h3
id="问题3如何让ai生成更好的代码">问题3：如何让AI生成更好的代码？</h3>
<p><strong>技巧</strong>：</p>
<ul>
<li>✅ 明确指定技术栈（Flex布局、媒体查询）</li>
<li>✅ 说明设计风格（现代化、简洁）</li>
<li>✅ 要求代码注释</li>
<li>✅ 指定断点值</li>
<li>✅ 要求移动优先策略</li>
</ul>
<hr />
<h2 id="本节总结-2">5.6 本节总结</h2>
<p>你已经学会了：</p>
<p>✅ <strong>AI生成响应式布局的方法</strong>：</p>
<ul>
<li>如何设计有效的Prompt</li>
<li>如何迭代优化代码</li>
<li>如何检查生成的代码</li>
</ul>
<p>✅ <strong>实战技能</strong>：</p>
<ul>
<li>用AI生成响应式导航栏</li>
<li>用AI生成响应式卡片布局</li>
<li>优化AI生成的代码</li>
</ul>
<p>✅ <strong>最佳实践</strong>：</p>
<ul>
<li>分步骤生成代码</li>
<li>详细描述需求</li>
<li>测试和优化</li>
</ul>
<blockquote>
<p>🌟 <strong>记住</strong>：<br />
AI是强大的工具，但<strong>不能替代你的思考</strong>！</p>
<ul>
<li><p>AI生成代码 → 你测试和优化 → 最终产品<br />
</p></li>
<li><p>理解代码原理 → 才能用好AI工具</p></li>
<li><p>多练习 → 才能写出更好的Prompt</p></li>
</ul>
<p><strong>AI + 你的思考 = 高效开发！</strong></p>
</blockquote>
<hr />
<h1 id="选讲css变量与主题定制">6. 选讲：CSS变量与主题定制</h1>
<h2 id="为什么需要css变量">6.1 为什么需要CSS变量？</h2>
<h3 id="传统方式的痛点">6.1.1 传统方式的痛点</h3>
<p><strong>生活场景</strong>：<br />
想象你在装修房子，选了一个主色调"蓝色"：</p>
<ul>
<li>客厅用蓝色</li>
<li>卧室用蓝色</li>
<li>厨房用蓝色</li>
</ul>
<p><strong>问题来了</strong>：如果有一天你想改成"绿色"，怎么办？</p>
<ul>
<li>❌
传统方式：找到所有用蓝色的地方，一个一个改成绿色（100个地方要改100次！）</li>
<li>✅
CSS变量方式：改一个变量的值，所有地方自动变成绿色（改1次，全部生效！）</li>
</ul>
<p><strong>传统CSS的问题</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 传统方式：每个地方都要写具体的颜色值 */</span></span><br><span class="line"><span class="selector-class">.header</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#3498db</span>;  <span class="comment">/* 蓝色 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.button</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#3498db</span>;  <span class="comment">/* 又是蓝色 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.link</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#3498db</span>;  <span class="comment">/* 还是蓝色 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 想改成绿色？要改3个地方！ */</span></span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>💡 <strong>核心问题</strong>：<br />
同样的颜色值（如<code>#3498db</code>）在代码中重复出现很多次，修改时需要在多个地方改，容易出错，维护困难。</p>
</blockquote>
<hr />
<h3 id="css变量的诞生2015年">6.1.2 CSS变量的诞生（2015年）</h3>
<p><strong>2015年，CSS3正式引入CSS变量（CSS Custom
Properties）</strong>，让样式管理变得简单：</p>
<table>
<thead>
<tr class="header">
<th>传统方式</th>
<th>CSS变量方式</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>重复写相同的值</td>
<td><strong>定义一次，到处使用</strong></td>
</tr>
<tr class="even">
<td>修改要改很多地方</td>
<td>修改只需改1个地方</td>
</tr>
<tr class="odd">
<td>容易出错</td>
<td>不容易出错</td>
</tr>
<tr class="even">
<td>代码冗长</td>
<td>代码简洁</td>
</tr>
</tbody>
</table>
<blockquote>
<p>🌟 <strong>历史意义</strong>：<br />
CSS变量让样式管理从"手工作坊"变成了"现代化工厂"，是CSS发展史上的重要进步。</p>
</blockquote>
<hr />
<h2 id="什么是css变量">6.2 什么是CSS变量？</h2>
<h3 id="生活类比-1">6.2.1 生活类比</h3>
<p><strong>CSS变量</strong>就像"调色板"：</p>
<ul>
<li>定义一次颜色（如"主色调 = 蓝色"）</li>
<li>在需要的地方引用（"用主色调"）</li>
<li>想换颜色？改调色板上的定义就行</li>
</ul>
<p><strong>CSS变量</strong>：</p>
<ul>
<li>定义一次值（如<code>--main-color: #3498db;</code>）</li>
<li>在需要的地方引用（<code>color: var(--main-color);</code>）</li>
<li>想换颜色？改变量的定义就行</li>
</ul>
<hr />
<h3 id="css变量的定义">6.2.2 CSS变量的定义</h3>
<p><strong>CSS变量</strong> = 可以重复使用的CSS值</p>
<p><strong>基本语法</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 定义变量 */</span></span><br><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">    --变量名: 值;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 使用变量 */</span></span><br><span class="line">选择器 &#123;</span><br><span class="line">    属性: <span class="built_in">var</span>(--变量名);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>实际例子</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 定义变量 */</span></span><br><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">    <span class="attr">--main-color</span>: <span class="number">#3498db</span>;  <span class="comment">/* 主色调：蓝色 */</span></span><br><span class="line">    <span class="attr">--font-size</span>: <span class="number">16px</span>;       <span class="comment">/* 字体大小 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 使用变量 */</span></span><br><span class="line"><span class="selector-class">.header</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="built_in">var</span>(--main-color);  <span class="comment">/* 使用主色调 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.button</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="built_in">var</span>(--main-color);   <span class="comment">/* 使用主色调 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.text</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="built_in">var</span>(--font-size);           <span class="comment">/* 使用字体大小 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>效果</strong>：</p>
<ul>
<li><code>.header</code>和<code>.button</code>都使用蓝色背景</li>
<li><code>.text</code>使用16px字体大小</li>
<li>想改颜色？改<code>--main-color</code>的值就行！</li>
</ul>
<hr />
<h2 id="css变量的语法详解">6.3 CSS变量的语法详解</h2>
<h3 id="定义变量">6.3.1 定义变量</h3>
<p><strong>语法</strong>：<code>--变量名: 值;</code></p>
<p><strong>规则</strong>：</p>
<ul>
<li>变量名必须以<code>--</code>开头（两个短横线）</li>
<li>变量名区分大小写（<code>--color</code>和<code>--Color</code>是不同的变量）</li>
<li>值可以是任何CSS值（颜色、尺寸、字符串等）</li>
</ul>
<p><strong>实际例子</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">    <span class="comment">/* 颜色变量 */</span></span><br><span class="line">    <span class="attr">--primary-color</span>: <span class="number">#3498db</span>;</span><br><span class="line">    <span class="attr">--secondary-color</span>: <span class="number">#2ecc71</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">/* 尺寸变量 */</span></span><br><span class="line">    <span class="attr">--spacing</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attr">--font-size-large</span>: <span class="number">24px</span>;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">/* 字符串变量 */</span></span><br><span class="line">    <span class="attr">--font-family</span>: <span class="string">&#x27;微软雅黑&#x27;</span>, Arial, sans-serif;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>💡 <strong>命名建议</strong>：<br />
使用有意义的变量名，如<code>--main-color</code>而不是<code>--color1</code>，这样代码更容易理解。</p>
</blockquote>
<hr />
<h3 id="使用变量">6.3.2 使用变量</h3>
<p><strong>语法</strong>：<code>var(--变量名)</code></p>
<p><strong>实际例子</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.button</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="built_in">var</span>(--primary-color);  <span class="comment">/* 使用主色调 */</span></span><br><span class="line">    <span class="attribute">padding</span>: <span class="built_in">var</span>(--spacing);                  <span class="comment">/* 使用间距 */</span></span><br><span class="line">    <span class="attribute">font-size</span>: <span class="built_in">var</span>(--font-size-large);        <span class="comment">/* 使用大字体 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>效果</strong>：<code>.button</code>的背景色、内边距、字体大小都使用变量中定义的值。</p>
<hr />
<h3 id="变量的作用域">6.3.3 变量的作用域</h3>
<p><strong>生活类比</strong>：<br />
变量的作用域就像"房间的规则"：</p>
<ul>
<li><strong>全局变量</strong>（<code>:root</code>）=
整个房子的规则（所有房间都遵守）</li>
<li><strong>局部变量</strong>（特定元素）=
某个房间的规则（只有这个房间遵守）</li>
</ul>
<p><strong>CSS变量的作用域</strong>：</p>
<table>
<thead>
<tr class="header">
<th>定义位置</th>
<th>作用域</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><code>:root</code></td>
<td>全局（整个文档）</td>
<td>所有元素都能使用</td>
</tr>
<tr class="even">
<td>特定元素</td>
<td>局部（该元素及其子元素）</td>
<td>只有该元素内部能使用</td>
</tr>
</tbody>
</table>
<p><strong>实际例子</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 全局变量：所有元素都能用 */</span></span><br><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">    <span class="attr">--main-color</span>: <span class="number">#3498db</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 局部变量：只有.container内部能用 */</span></span><br><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attr">--local-color</span>: <span class="number">#e74c3c</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 使用全局变量 */</span></span><br><span class="line"><span class="selector-class">.header</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">var</span>(--main-color);  <span class="comment">/* ✅ 可以用 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 使用局部变量 */</span></span><br><span class="line"><span class="selector-class">.container</span> <span class="selector-class">.item</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">var</span>(--local-color);  <span class="comment">/* ✅ 可以用（在.container内部） */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.other</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">var</span>(--local-color);  <span class="comment">/* ❌ 不能用（不在.container内部） */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<hr />
<h3 id="变量的默认值">6.3.4 变量的默认值</h3>
<p><strong>语法</strong>：<code>var(--变量名, 默认值)</code></p>
<p><strong>作用</strong>：如果变量未定义，使用默认值</p>
<p><strong>实际例子</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.text</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">var</span>(--text-color, <span class="number">#333</span>);  <span class="comment">/* 如果--text-color未定义，使用#333 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>💡 <strong>使用场景</strong>：<br />
当不确定变量是否已定义时，使用默认值可以避免样式失效。</p>
</blockquote>
<hr />
<h2 id="实战案例使用css变量实现主题切换">6.4
实战案例：使用CSS变量实现主题切换</h2>
<h3 id="需求分析-2">6.4.1 需求分析</h3>
<p>我们要实现一个<strong>主题切换功能</strong>：</p>
<ul>
<li>默认：明亮模式（白色背景、黑色文字）</li>
<li>切换后：暗黑模式（深色背景、浅色文字）</li>
<li>点击按钮切换主题</li>
</ul>
<hr />
<h3 id="html结构-2">6.4.2 HTML结构</h3>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;zh-CN&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>主题切换示例<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;style.css&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;container&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">header</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">h1</span>&gt;</span>我的网站<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">&quot;theme-toggle&quot;</span>&gt;</span>🌙 切换到暗黑模式<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">main</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">h2</span>&gt;</span>卡片标题<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">p</span>&gt;</span>这是卡片的内容。点击右上角的按钮可以切换主题。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;card&quot;</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">h2</span>&gt;</span>另一个卡片<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">p</span>&gt;</span>暗黑模式对眼睛更友好，特别是在晚上使用。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;script.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<hr />
<h3 id="css样式完整代码-2">6.4.3 CSS样式（完整代码）</h3>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* ===== 定义CSS变量（明亮模式，默认） ===== */</span></span><br><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">    <span class="attr">--bg-color</span>: <span class="number">#ffffff</span>;        <span class="comment">/* 背景色：白色 */</span></span><br><span class="line">    <span class="attr">--text-color</span>: <span class="number">#333333</span>;      <span class="comment">/* 文字颜色：深灰色 */</span></span><br><span class="line">    <span class="attr">--card-bg</span>: <span class="number">#f5f5f5</span>;         <span class="comment">/* 卡片背景：浅灰色 */</span></span><br><span class="line">    <span class="attr">--border-color</span>: <span class="number">#e0e0e0</span>;    <span class="comment">/* 边框颜色：浅灰色 */</span></span><br><span class="line">    <span class="attr">--button-bg</span>: <span class="number">#3498db</span>;       <span class="comment">/* 按钮背景：蓝色 */</span></span><br><span class="line">    <span class="attr">--button-text</span>: <span class="number">#ffffff</span>;     <span class="comment">/* 按钮文字：白色 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* ===== 暗黑模式变量 ===== */</span></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> &#123;</span><br><span class="line">    <span class="attr">--bg-color</span>: <span class="number">#1a1a1a</span>;        <span class="comment">/* 背景色：深色 */</span></span><br><span class="line">    <span class="attr">--text-color</span>: <span class="number">#f0f0f0</span>;     <span class="comment">/* 文字颜色：浅色 */</span></span><br><span class="line">    <span class="attr">--card-bg</span>: <span class="number">#2d2d2d</span>;         <span class="comment">/* 卡片背景：深灰色 */</span></span><br><span class="line">    <span class="attr">--border-color</span>: <span class="number">#404040</span>;    <span class="comment">/* 边框颜色：灰色 */</span></span><br><span class="line">    <span class="attr">--button-bg</span>: <span class="number">#4a9eff</span>;       <span class="comment">/* 按钮背景：亮蓝色 */</span></span><br><span class="line">    <span class="attr">--button-text</span>: <span class="number">#ffffff</span>;     <span class="comment">/* 按钮文字：白色 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* ===== 应用变量到样式 ===== */</span></span><br><span class="line">* &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="built_in">var</span>(--bg-color);      <span class="comment">/* 使用背景色变量 */</span></span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">var</span>(--text-color);                <span class="comment">/* 使用文字颜色变量 */</span></span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">&#x27;微软雅黑&#x27;</span>, Arial, sans-serif;</span><br><span class="line">    <span class="attribute">transition</span>: background-color <span class="number">0.3s</span>, color <span class="number">0.3s</span>;  <span class="comment">/* 平滑过渡 */</span></span><br><span class="line">    <span class="attribute">min-height</span>: <span class="number">100vh</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">max-width</span>: <span class="number">1200px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">header</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">justify-content</span>: space-between;</span><br><span class="line">    <span class="attribute">align-items</span>: center;</span><br><span class="line">    <span class="attribute">margin-bottom</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">padding-bottom</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">border-bottom</span>: <span class="number">2px</span> solid <span class="built_in">var</span>(--border-color);  <span class="comment">/* 使用边框颜色变量 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">h1</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">32px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#theme-toggle</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="built_in">var</span>(--button-bg);     <span class="comment">/* 使用按钮背景变量 */</span></span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">var</span>(--button-text);               <span class="comment">/* 使用按钮文字变量 */</span></span><br><span class="line">    <span class="attribute">border</span>: none;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line">    <span class="attribute">cursor</span>: pointer;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">    <span class="attribute">transition</span>: background-color <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#theme-toggle</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">opacity</span>: <span class="number">0.9</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">main</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: flex;</span><br><span class="line">    <span class="attribute">flex-direction</span>: column;</span><br><span class="line">    <span class="attribute">gap</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.card</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="built_in">var</span>(--card-bg);       <span class="comment">/* 使用卡片背景变量 */</span></span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="built_in">var</span>(--border-color);   <span class="comment">/* 使用边框颜色变量 */</span></span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">2px</span> <span class="number">4px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.1</span>);</span><br><span class="line">    <span class="attribute">transition</span>: background-color <span class="number">0.3s</span>, border-color <span class="number">0.3s</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.card</span> <span class="selector-tag">h2</span> &#123;</span><br><span class="line">    <span class="attribute">margin-bottom</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">var</span>(--text-color);                <span class="comment">/* 使用文字颜色变量 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.card</span> <span class="selector-tag">p</span> &#123;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">1.6</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">var</span>(--text-color);                <span class="comment">/* 使用文字颜色变量 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr />
<h3 id="javascript代码实现主题切换">6.4.4
JavaScript代码（实现主题切换）</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取切换按钮</span></span><br><span class="line"><span class="keyword">const</span> themeToggle = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;theme-toggle&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 检查本地存储中是否有保存的主题</span></span><br><span class="line"><span class="keyword">const</span> savedTheme = <span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;theme&#x27;</span>) || <span class="string">&#x27;light&#x27;</span>;</span><br><span class="line"><span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="title function_">setAttribute</span>(<span class="string">&#x27;data-theme&#x27;</span>, savedTheme);</span><br><span class="line"><span class="title function_">updateButtonText</span>(savedTheme);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 点击按钮切换主题</span></span><br><span class="line">themeToggle.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// 获取当前主题</span></span><br><span class="line">    <span class="keyword">const</span> currentTheme = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="title function_">getAttribute</span>(<span class="string">&#x27;data-theme&#x27;</span>);</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 切换主题</span></span><br><span class="line">    <span class="keyword">const</span> newTheme = currentTheme === <span class="string">&#x27;dark&#x27;</span> ? <span class="string">&#x27;light&#x27;</span> : <span class="string">&#x27;dark&#x27;</span>;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="title function_">setAttribute</span>(<span class="string">&#x27;data-theme&#x27;</span>, newTheme);</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 保存到本地存储（下次打开页面时记住用户的选择）</span></span><br><span class="line">    <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&#x27;theme&#x27;</span>, newTheme);</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 更新按钮文字</span></span><br><span class="line">    <span class="title function_">updateButtonText</span>(newTheme);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 更新按钮文字</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">updateButtonText</span>(<span class="params">theme</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (theme === <span class="string">&#x27;dark&#x27;</span>) &#123;</span><br><span class="line">        themeToggle.<span class="property">textContent</span> = <span class="string">&#x27;☀️ 切换到明亮模式&#x27;</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        themeToggle.<span class="property">textContent</span> = <span class="string">&#x27;🌙 切换到暗黑模式&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr />
<h3 id="代码解析逐步理解-2">6.4.5 代码解析（逐步理解）</h3>
<h4 id="第一步定义变量明亮模式">第一步：定义变量（明亮模式）</h4>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">    <span class="attr">--bg-color</span>: <span class="number">#ffffff</span>;        <span class="comment">/* 白色背景 */</span></span><br><span class="line">    <span class="attr">--text-color</span>: <span class="number">#333333</span>;      <span class="comment">/* 深色文字 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>效果</strong>：定义默认主题的变量。</p>
<h4 id="第二步定义变量暗黑模式">第二步：定义变量（暗黑模式）</h4>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> &#123;</span><br><span class="line">    <span class="attr">--bg-color</span>: <span class="number">#1a1a1a</span>;        <span class="comment">/* 深色背景 */</span></span><br><span class="line">    <span class="attr">--text-color</span>: <span class="number">#f0f0f0</span>;      <span class="comment">/* 浅色文字 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>效果</strong>：当<code>&lt;html&gt;</code>元素有<code>data-theme="dark"</code>属性时，使用暗黑模式的变量值。</p>
<h4 id="第三步应用变量">第三步：应用变量</h4>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="built_in">var</span>(--bg-color);  <span class="comment">/* 使用变量 */</span></span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">var</span>(--text-color);            <span class="comment">/* 使用变量 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>效果</strong>：<code>body</code>的背景色和文字颜色会根据当前主题自动变化。</p>
<h4 id="第四步javascript切换主题">第四步：JavaScript切换主题</h4>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="title function_">setAttribute</span>(<span class="string">&#x27;data-theme&#x27;</span>, <span class="string">&#x27;dark&#x27;</span>);</span><br></pre></td></tr></table></figure>
<p><strong>效果</strong>：给<code>&lt;html&gt;</code>元素添加<code>data-theme="dark"</code>属性，触发暗黑模式的CSS变量。</p>
<hr />
<h3 id="最终效果-2">6.4.6 最终效果</h3>
<p><strong>明亮模式</strong>：</p>
<ul>
<li>白色背景</li>
<li>深色文字</li>
<li>浅色卡片</li>
</ul>
<p><strong>暗黑模式</strong>：</p>
<ul>
<li>深色背景</li>
<li>浅色文字</li>
<li>深色卡片</li>
</ul>
<p><strong>切换效果</strong>：</p>
<ul>
<li>点击按钮 → 主题立即切换</li>
<li>切换有平滑过渡动画</li>
<li>用户选择会保存到本地存储（下次打开页面时记住）</li>
</ul>
<hr />
<h2 id="更多实战案例-2">6.5 更多实战案例</h2>
<h3
id="案例1多主题切换不只是明亮暗黑">案例1：多主题切换（不只是明亮/暗黑）</h3>
<p><strong>需求</strong>：支持明亮、暗黑、蓝色主题三种模式</p>
<p><strong>CSS</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 明亮主题（默认） */</span></span><br><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">    <span class="attr">--bg-color</span>: <span class="number">#ffffff</span>;</span><br><span class="line">    <span class="attr">--text-color</span>: <span class="number">#333333</span>;</span><br><span class="line">    <span class="attr">--primary-color</span>: <span class="number">#3498db</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 暗黑主题 */</span></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;dark&quot;</span>]</span> &#123;</span><br><span class="line">    <span class="attr">--bg-color</span>: <span class="number">#1a1a1a</span>;</span><br><span class="line">    <span class="attr">--text-color</span>: <span class="number">#f0f0f0</span>;</span><br><span class="line">    <span class="attr">--primary-color</span>: <span class="number">#4a9eff</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 蓝色主题 */</span></span><br><span class="line"><span class="selector-attr">[data-theme=<span class="string">&quot;blue&quot;</span>]</span> &#123;</span><br><span class="line">    <span class="attr">--bg-color</span>: <span class="number">#e3f2fd</span>;</span><br><span class="line">    <span class="attr">--text-color</span>: <span class="number">#1565c0</span>;</span><br><span class="line">    <span class="attr">--primary-color</span>: <span class="number">#1976d2</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>JavaScript</strong>： <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> themes = [<span class="string">&#x27;light&#x27;</span>, <span class="string">&#x27;dark&#x27;</span>, <span class="string">&#x27;blue&#x27;</span>];</span><br><span class="line"><span class="keyword">let</span> currentIndex = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line">themeToggle.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    currentIndex = (currentIndex + <span class="number">1</span>) % themes.<span class="property">length</span>;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="title function_">setAttribute</span>(<span class="string">&#x27;data-theme&#x27;</span>, themes[currentIndex]);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></p>
<hr />
<h3
id="案例2响应式变量根据屏幕大小改变值">案例2：响应式变量（根据屏幕大小改变值）</h3>
<p><strong>需求</strong>：不同屏幕大小使用不同的间距</p>
<p><strong>CSS</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">    <span class="attr">--spacing</span>: <span class="number">10px</span>;  <span class="comment">/* 默认间距 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 平板：增大间距 */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">768px</span>) &#123;</span><br><span class="line">    <span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">        <span class="attr">--spacing</span>: <span class="number">20px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 电脑：更大间距 */</span></span><br><span class="line"><span class="keyword">@media</span> (<span class="attribute">min-width</span>: <span class="number">1024px</span>) &#123;</span><br><span class="line">    <span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">        <span class="attr">--spacing</span>: <span class="number">30px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="built_in">var</span>(--spacing);  <span class="comment">/* 自动适应不同屏幕 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<hr />
<h2 id="css变量的优势总结">6.6 CSS变量的优势总结</h2>
<table>
<thead>
<tr class="header">
<th>优势</th>
<th>说明</th>
<th>实际效果</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>代码复用</strong></td>
<td>定义一次，到处使用</td>
<td>减少重复代码</td>
</tr>
<tr class="even">
<td><strong>易于维护</strong></td>
<td>修改只需改1个地方</td>
<td>改颜色只需改变量定义</td>
</tr>
<tr class="odd">
<td><strong>动态切换</strong></td>
<td>通过JavaScript动态改变</td>
<td>实现主题切换功能</td>
</tr>
<tr class="even">
<td><strong>作用域控制</strong></td>
<td>全局或局部变量</td>
<td>灵活控制应用范围</td>
</tr>
<tr class="odd">
<td><strong>类型安全</strong></td>
<td>值可以是任何CSS类型</td>
<td>支持颜色、尺寸、字符串等</td>
</tr>
</tbody>
</table>
<hr />
<h2 id="常见问题与解决方案-3">6.7 常见问题与解决方案</h2>
<h3 id="问题1css变量不生效">问题1：CSS变量不生效？</h3>
<p><strong>可能原因</strong>：</p>
<ol type="1">
<li>变量名写错了（必须是<code>--</code>开头）</li>
<li>作用域问题（变量定义的位置不对）</li>
<li>浏览器不支持（IE不支持CSS变量）</li>
</ol>
<p><strong>解决方案</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 1. 检查变量名 */</span></span><br><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">    <span class="attr">--main-color</span>: <span class="number">#3498db</span>;  <span class="comment">/* ✅ 正确：--开头 */</span></span><br><span class="line">    <span class="selector-tag">main</span>-<span class="attribute">color</span>: <span class="number">#3498db</span>;    <span class="comment">/* ❌ 错误：没有-- */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 2. 检查作用域 */</span></span><br><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">    <span class="attr">--color</span>: <span class="number">#3498db</span>;  <span class="comment">/* ✅ 全局变量，所有地方都能用 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.container</span> &#123;</span><br><span class="line">    <span class="attr">--color</span>: <span class="number">#e74c3c</span>;  <span class="comment">/* ✅ 局部变量，只有.container内部能用 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 3. 提供回退值 */</span></span><br><span class="line"><span class="selector-class">.text</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">var</span>(--text-color, <span class="number">#333</span>);  <span class="comment">/* 如果变量未定义，使用#333 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<hr />
<h3
id="问题2如何在不支持css变量的浏览器中使用">问题2：如何在不支持CSS变量的浏览器中使用？</h3>
<p><strong>解决方案</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 提供回退值 */</span></span><br><span class="line"><span class="selector-class">.button</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#3498db</span>;  <span class="comment">/* 回退值（不支持CSS变量的浏览器用这个） */</span></span><br><span class="line">    <span class="attribute">background-color</span>: <span class="built_in">var</span>(--primary-color, <span class="number">#3498db</span>);  <span class="comment">/* CSS变量（支持的浏览器用这个） */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>💡 <strong>注意</strong>：<br />
现代浏览器（Chrome、Firefox、Safari、Edge）都支持CSS变量。<br />
只有IE浏览器不支持，但IE已经停止更新，可以忽略。</p>
</blockquote>
<hr />
<h3 id="问题3变量名应该怎么命名">问题3：变量名应该怎么命名？</h3>
<p><strong>推荐命名方式</strong>： <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* ✅ 好的命名：语义化、清晰 */</span></span><br><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">    <span class="attr">--primary-color</span>: <span class="number">#3498db</span>;      <span class="comment">/* 主色调 */</span></span><br><span class="line">    <span class="attr">--secondary-color</span>: <span class="number">#2ecc71</span>;    <span class="comment">/* 次要颜色 */</span></span><br><span class="line">    <span class="attr">--spacing-small</span>: <span class="number">10px</span>;         <span class="comment">/* 小间距 */</span></span><br><span class="line">    <span class="attr">--spacing-large</span>: <span class="number">30px</span>;          <span class="comment">/* 大间距 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* ❌ 不好的命名：不清晰 */</span></span><br><span class="line"><span class="selector-pseudo">:root</span> &#123;</span><br><span class="line">    <span class="attr">--color1</span>: <span class="number">#3498db</span>;</span><br><span class="line">    <span class="attr">--color2</span>: <span class="number">#2ecc71</span>;</span><br><span class="line">    <span class="attr">--size1</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attr">--size2</span>: <span class="number">30px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<hr />
<h2 id="本节总结-3">6.8 本节总结</h2>
<p>你已经学会了：</p>
<p>✅ <strong>CSS变量的核心概念</strong>：</p>
<ul>
<li>什么是CSS变量</li>
<li>为什么需要CSS变量</li>
<li>变量的作用域</li>
</ul>
<p>✅ <strong>CSS变量的语法</strong>：</p>
<ul>
<li>如何定义变量（<code>:root</code>、局部变量）</li>
<li>如何使用变量（<code>var()</code>函数）</li>
<li>变量的默认值</li>
</ul>
<p>✅ <strong>实战技能</strong>：</p>
<ul>
<li>使用CSS变量实现主题切换</li>
<li>多主题切换</li>
<li>响应式变量</li>
</ul>
<p>✅ <strong>最佳实践</strong>：</p>
<ul>
<li>变量命名规范</li>
<li>浏览器兼容性处理</li>
<li>代码组织方式</li>
</ul>
<blockquote>
<p>🌟 <strong>记住</strong>：<br />
CSS变量是现代Web开发的<strong>重要工具</strong>！<br />
掌握了CSS变量，你就能：</p>
<ul>
<li><p>让代码更简洁、易维护</p></li>
<li><p>实现动态主题切换</p></li>
<li><p>提升开发效率</p></li>
</ul>
<p><strong>CSS变量 + JavaScript = 强大的主题定制能力！</strong></p>
</blockquote>
<hr />
<h2 id="本章总结">本章总结</h2>
<p>通过本章的学习，你已经掌握了：</p>
<p>✅ <strong>CSS基础</strong>：</p>
<ul>
<li>CSS的作用和重要性</li>
<li>CSS选择器的使用</li>
<li>选择器优先级</li>
</ul>
<p>✅ <strong>Flex布局</strong>：</p>
<ul>
<li>Flex容器和Flex项目</li>
<li>主轴和交叉轴</li>
<li>常用属性（<code>justify-content</code>、<code>align-items</code>等）</li>
<li>实现导航栏布局</li>
</ul>
<p>✅ <strong>响应式设计</strong>：</p>
<ul>
<li>媒体查询的语法和应用</li>
<li>断点的概念</li>
<li>移动优先策略</li>
<li>制作自适应页面</li>
</ul>
<p>✅ <strong>AI辅助开发</strong>：</p>
<ul>
<li>用AI生成响应式布局</li>
<li>优化AI生成的代码</li>
<li>写出更好的Prompt</li>
</ul>
<p>✅ <strong>CSS变量（选讲）</strong>：</p>
<ul>
<li>CSS变量的定义和使用</li>
<li>实现主题切换功能</li>
</ul>
<blockquote>
<p>🌟 <strong>恭喜你！</strong><br />
你已经掌握了现代Web开发中CSS的核心技能！<br />
这些知识将帮助你：</p>
<ul>
<li><p>制作美观的网页界面</p></li>
<li><p>实现响应式布局</p></li>
<li><p>提升开发效率</p></li>
</ul>
<p><strong>继续练习，继续探索，Web开发的世界等着你！</strong> 🚀</p>
</blockquote>

    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/AI%E9%A9%B1%E5%8A%A8Web%E5%BC%80%E5%8F%91%E6%8A%80%E6%9C%AF/" rel="tag"># AI驱动Web开发技术</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2025-09-26-02-Web%E5%BC%80%E5%8F%91%E5%9F%BA%E7%A1%80/" rel="prev" title="02.Web开发基础">
                  <i class="fa fa-angle-left"></i> 02.Web开发基础
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2025-11-18-04-JavaScript%E5%9F%BA%E7%A1%80/" rel="next" title="04.JavaScript基础">
                  04.JavaScript基础 <i class="fa fa-angle-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






    <div class="comments utterances-container"></div>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">

  <div class="copyright">
    &copy; 
    <span itemprop="copyrightYear">2025</span>
    <span class="with-love">
      <i class="fa fa-heart"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">CSGrandeur</span>
  </div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>
  <div class="sidebar-dimmer"></div>
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up fa-lg"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


  
  <script src="https://fastly.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="https://fastly.jsdelivr.net/npm/@next-theme/pjax@0.6.0/pjax.min.js" integrity="sha256-vxLn1tSKWD4dqbMRyv940UYw4sXgMtYcK6reefzZrao=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/sidebar.js"></script><script src="/js/next-boot.js"></script><script src="/js/pjax.js"></script>

  <script src="https://fastly.jsdelivr.net/npm/hexo-generator-searchdb@1.4.1/dist/search.js" integrity="sha256-1kfA5uHPf65M5cphT2dvymhkuyHPQp5A53EGZOnOLmc=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>







  




  

  <script class="next-config" data-name="enableMath" type="application/json">true</script><script class="next-config" data-name="mathjax" type="application/json">{"enable":true,"tags":"none","js":{"url":"https://fastly.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-mml-chtml.js","integrity":"sha256-MASABpB4tYktI2Oitl4t+78w/lyA+D7b/s9GEP0JOGI="}}</script>
<script src="/js/third-party/math/mathjax.js"></script>


<script class="next-config" data-name="utterances" type="application/json">{"enable":true,"repo":"CSGrandeur/csgrandeur.github.io","issue_term":"pathname","theme":"github-light"}</script>
<script src="/js/third-party/comments/utterances.js"></script>

</body>
</html>
